Popup
A customizable, pixel-art styled popup component for displaying modal content.
Basic Usage
import React, { useState } from 'react';import { Button, Popup } from 'pixel-retroui';function App() {const [isPopupOpen, setIsPopupOpen] = useState(false);const openPopup = () => setIsPopupOpen(true);const closePopup = () => setIsPopupOpen(false);return (<div><Button onClick={openPopup}>Open Popup</Button><PopupisOpen={isPopupOpen}onClose={closePopup}>Your popup content here</Popup></div>);}
Props
Prop | Type | Default | Description |
---|---|---|---|
isOpen | boolean | false | Controls whether the popup is visible |
onClose | function | - | Function to call when closing the popup |
bg | string | '#ffffff' | Background color of the popup content |
baseBg | string | '#f0f0f0' | Background color of the popup container |
textColor | string | '#000000' | Text color of the popup content |
borderColor | string | '#000000' | Border color of the popup |
className | string | '' | Additional CSS classes to apply to the popup |
Custom Popup
Customize your popup's appearance by selecting a preset theme or creating your own color scheme.
Theme:
<div><Button onClick={openPopup}>Open Popup</Button><PopupisOpen={isPopupOpen}onClose={closePopup}bg="#fefcd0"baseBg="#c381b5"textColor="black"borderColor="black">Your popup content here</Popup></div>
Additional Examples
With Custom Content and Classes
<div><Button bg="gray" onClick={openPopup}>Open form</Button><Popupbg="darkgray"baseBg="gray"isOpen={isPopupOpen}onClose={closePopup}className="text-center"><h1 className="text-3xl mb-4">Welcome!</h1><p className="mb-4"> Please login to continue.</p><form onSubmit={handleSubmit} className=" flex flex-col gap-4 items-center"><Input bg="#f2f2f2" placeholder="Username" /><Input bg="#f2f2f2" type="password" placeholder="Password" /><Button bg="gray" type="submit" className=" w-20">Login</Button></form></Popup></div>
Preview: