ElaSpark-UI is a lightweight, customizable React library for creating responsive and animated modals with ease. Perfect for adding a touch of elegance and interactivity to your web projects.
- Responsive: Adapts perfectly to all screen sizes.
- Customizable: Wide range of styles and animations.
- Easy to Use: Simple interface for quick integration.
- Lightweight: Optimized not to weigh down your project.
- Flexible Buttons: Add customizable buttons with various functions.
npm install elaspark-ui
You can install ElaSpark-UI via npm:
To use ElaSpark-UI in your React project, follow these simple steps:
- Import ElaSpark-UI:
import { Modal } from 'elaspark-ui';
- Use Modal in your React component:
function App() {
return (
<Modal size="m-m" styleType="style-1" centered>
{/* Modal content here */}
</Modal>
);
}
.modal-header
: Container for the image/logo and modal title.- Use this class to create a distinct header within your modal.
.modal-logo
: Class for the image or logo in the header.- This class defines the image or logo size to 30% of the container width.
.modal-title
: Class for the title in the header.- This class allocates 70% of the container width for the modal title.
.modal-content
: Container for the main body of the modal.- Use this class to add text, images, or other elements in the modal body.
- To customize titles and paragraphs, use the following classes:
.t-1
,.t-2
,.t-3
,.t-4
for titles of different sizes..p-1
,.p-2
,.p-3
for paragraphs of different sizes.
- You can also align these elements left, center, or right using
.left
,.center
,.right
classes.
<Modal size="m-m" styleType="style-1" centered>
<div className="modal-header">
<img src="/path/to/your/logo.png" className="modal-logo" alt="Logo" />
<div className="modal-title t-1 center">Your Title Here</div>
</div>
<div className="modal-content">
<p className="p-1 left">Your text here.</p>
{/* Other contents */}
</div>
</Modal>;
<Modal
size="m-l"
styleType="style-2"
animation="slideInFromTop"
title={{ text: 'Titre Modal', size: '1' }}
paragraph={{ text: 'Paragraph content.', size: '1' }}
logoSrc="/path/to/your/logo.png"
>
{/* Other custom content here */}
</Modal>
Here's an example showing how to integrate a logo, title, and textual content with specific layout and animation:
import { Modal } from "elaspark-ui";
function CustomModalExample() {
return (
<Modal
size="m-l"
styleType="style-5"
backdropStyle="indigo"
animation="neon-violet"
centered
title={{ size: "2", text: "Modal Title", align: "center" }}
paragraph={{ size: "2", text: "Paragraph content.", align: "center" }}
logoSrc="/path/to/your/logo.png"
>
{/* Custom content here */}
</Modal>
);
}
<Modal size="m-xl" styleType="style-5" centered>
<img src="/path/to/image.jpg" className="modal-logo" alt="Image" />
<div className="modal-title t-3">"Image Title"</div>
<p className="modal-paragraph p-1">
Description or content associated with the image.
</p>
</Modal>;
- m-xxs: Extra Extra Small
- m-xs: Extra Small
- m-s: Small
- m-m: Medium
- m-l: Large
- m-xl: Extra Large
- m-xxl: Extra Extra Large
ElaSpark-UI offers a variety of predefined styles to customize the appearance of your modals. Use the styleType
prop to choose from the following styles:
- style-1: Elegant and Classic
- style-2: Modern with Colored Outline
- style-3: Minimalist with Large Shadow
- style-4: Elegant Card with Gray Background
- style-5: Dark and Sophisticated
- style-7: Indigo
- style-8: Minimalist with Blue Background
- style-9: Subtle Elegance with Soft Shadow
- style-10: Dark with Colored Border
- style-11: Bright with Thin Colored Border
- style-12: Teal Green
- style-13: Deep Indigo
- dark: A dark background with opacity
- light: A light background with opacity
- dark-opaque: A very dark background with higher opacity
- light-opaque: A light background with higher opacity
- indigo: An indigo-colored background
- red: A red background for a strong visual impact
- green: A green background for a natural touch
- blue-light: A light blue background for a soothing ambiance
- pink-light: A light pink background for a soft touch
- yellow-light: A light yellow background for a cheerful ambiance
- purple: A purple background for a touch of elegance
- clear: No background, allowing the modal to blend with the page's background
- Animation Name:
fadeIn
- Description: Gradually makes the modal appear.
- Animation Name:
fadeOut
- Description: Gradually makes the modal disappear.
- Animation Name:
flash
- Description: Creates a flash effect by alternating opacity.
- Animation Name:
softBlink
- Description: Gently makes the modal blink.
- Animation Name:
gradualDisappear
- Description: Gradually makes the modal disappear with a gradual effect.
- Animation Name:
gradualAppear
- Description: Gradually makes the modal appear with a gradual effect.
- Animation Name:
sparkle
- Description: Creates a rapid twinkling effect.
- Animation Name:
rotate
- Description: Rotates the modal around its center.
- Animation Name:
swell
- Description: Makes the modal swell, making it appear larger.
- Animation Name:
shrink
- Description: Reduces the size of the modal, making it appear smaller.
- Animation Name:
neon-purple
- Description: Violet neon animation, evoking a starry night.
- Animation Name:
neon-blue
- Description: Calm blue gradient, perfect for a tranquil effect.
- Animation Name:
neon-green
- Description: Vibrant green neon for a lively and fresh look.
- Animation Name:
neon-red
- Description: Bold red neon for a strong visual impact.
- Animation Name:
neon-orange
- Description: Warm orange glow for a cozy, inviting feel.
- Animation Name:
neon-pink
- Description: Playful pink neon, ideal for a whimsical touch.
- Animation Name:
neon-yellow
- Description: Bright yellow neon for an optimistic vibe.
- Animation Name:
border-neon
- Description: Multi-colored border for a dynamic appearance.
- Animation Name:
border-neon-blue-purple
- Description: Alternating blue and purple for a stylish look.
- Animation Name:
border-neon-red-orange
- Description: Vibrant red and orange border for an energetic feel.
- Animation Name:
border-neon-green-yellow
- Description: Refreshing green and yellow border for a lively style.
- Animation Name:
border-neon-rainbow
- Description: Rainbow border cycling through various hues.
import { Modal } from "elaspark-ui";
function AnimatedModalExample() {
return (
<Modal
size="m-l"
styleType="style-4"
animation="softBlink"
title={{ text: "Modal Title", size: "1" }}
paragraph={{ text: "Paragraph content here.", size: "1" }}
logoSrc="/path/to/your/logo.png"
>
{/* Additional custom content here */}
<div className="modal-content">
<h2 className="modal-title t-2">Your Custom Title</h2>
<p className="modal-paragraph p-2">
This is some custom content for the modal, which can include text,
images, or other elements.
</p>
</div>
</Modal>
);
}
The Modal
component is designed with accessibility features to ensure usability for users with assistive technologies.
aria-hidden
: Ensures the modal is appropriately hidden or shown to assistive technologies.onKeyDown
: Handles keyboard interactions, like closing the modal with the Escape key.role="dialog"
: Identifies the modal as a dialog to screen readers.aria-modal="true"
: Indicates that the modal is a modal dialog, ensuring screen readers treat it as a focus trap.aria-labelledby
: Associates the modal with its title for screen readers.ref={setFocus}
: Manages focus within the modal to ensure the first focusable element is focused when the modal opens.
<Modal
ariaLabelledBy="modalTitle"
onClose={handleCloseModal}
// ... other props
>
{/* Modal Content Here */}
</Modal>
ElaSpark-UI offers a variety of customizable buttons that you can use in your modals and elsewhere in your React projects.
elaspark-ui modals can include customizable buttons for various actions. You can freely name them (e.g., "Accept", "Cancel", "Reject") and assign them specific functions, such as sending an API request or saving data in local storage.
<Modal>
{/* Contenu */}
<button
onClick={() => {
/* Your code for making an API request or storing in local storage */
}}
>
Accepter
</button>
<button
onClick={() => {
/* Code to cancel or close the modal */
}}
>
Annuler
</button>
</Modal>;
To use ElaSpark-UI buttons, import the Button
component and use it in your application:
import { Button } from 'elaspark-ui';
function App() {
return (
<Button onClick={() => console.log('Clicked!')}>
Cliquer ici
</Button>
);
}
<Button
size="b-m"
styleType="btn-1"
animation="wave"
borderStyle="b-b-2"
onClick={() => {/* Your code here */}}
>
Custom Button
</Button>
- b-s: Small
- b-m: Medium
- b-l: Large
- b-xl: Extra Large
- btn-1: Blue
- btn-2: Green
- btn-3: Yellow
- btn-4: Teal
- btn-5: Red
- btn-6: Orange
- btn-7: Purple
- btn-8: Mint Green
- btn-9: Indigo
- btn-10: Pink
- b-b-1: Standard Solid Border
- b-b-2: Dotted Border
- b-b-3: Dashed Border
- b-b-4: Thicker Border
- b-b-5: Rounded Border
- b-b-6: Double Border
- b-b-7: Grooved Border
- b-b-8: Inset Border
- b-b-9: Shadowed Border
- b-b-10: Wavy Border
<Button
size="b-m"
styleType="btn-1"
onClick={() => {/* Your action here */}}
>
Action
</Button>
Use the ButtonContainer
to group and align buttons together. The align
prop can be used for both ButtonContainer
and individual Button
components to control their alignment.
align="right"
: Aligns all buttons inside the container to the right.align="center"
: Centers all buttons inside the container.align="left"
: Aligns all buttons inside the container to the left.align="auto"
: Automatically spaces buttons inside the container.
align="right"
: Aligns the button to the right within its container.align="left"
: Aligns the button to the left within its container.
<ButtonContainer align="center">
<Button align="right" size="b-m" styleType="btn-10">Close</Button>
<Button align="left" size="b-m" styleType="btn-2">Action</Button>
</ButtonContainer>
The Button
component in our library supports several accessibility attributes to ensure a better user experience for people using assistive technologies.
ariaLabel
: Provides an accessible label for the button.ariaPressed
: Indicates whether the button is pressed or not (for toggle buttons).ariaDisabled
: Indicates if the button is disabled.ariaExpanded
: Indicates if the button controls the expansion of another element.ariaHaspopup
: Indicates if the button opens a menu or panel.ariaControls
: Identifies the element controlled by the button.role
: Defines the role of the button (default is"button"
).tabIndex
: Defines the tabbing order of the button.
<Button
ariaLabel="Close"
ariaPressed={false}
onClick={handleClose}
>
Close
</Button>
ElaSpark-UI also offers a variety of styles and animations for buttons, allowing you to tailor them to the look and feel of your application.
To apply an animation to a button, use the animation
prop with the desired animation name.
import { Button } from 'elaspark-ui';
function App() {
return (
<Button animation="wave">
Animated Button
</Button>
);
}
- Animation Name:
wave
- Description: Creates a wave effect on the button on hover.
- Animation Name:
shadow
- Description: Adds a drop shadow to the button when hovered.
- Animation Name:
rotate
- Description: Rotates the button on hover.
- Animation Name:
pulse
- Description: Creates a pulsing effect on the button.
- Animation Name:
swing
- Description: Gives a swinging effect to the button.
- Animation Name:
stretchVertical
- Description: Stretches the button vertically on hover.
- Animation Name:
stretchHorizontal
- Description: Stretches the button horizontally on hover.
- Animation Name:
bounce
- Description: Creates a bouncing effect for the button.
- Animation Name:
blur
- Description: Applies a blur effect to the button on hover.
- Animation Name:
colorFade
- Description: Gradually changes the background color of the button on hover.
<Button animation="wave">
Wave Effect
</Button>
<Button animation="shadow">
Drop Shadow
</Button>
<Button animation="swing">
Swing
</Button>
<Button animation="pulse">
Pulse
</Button>
Easily integrate buttons into your modals:
import { Modal, Button } from 'elaspark-ui';
function MyComponent() {
return (
<Modal size="m-m" styleType="style-1">
<div className="b-container b-c">
<Button size="b-m" styleType="btn-1" animation="wave">Accept</Button>
<Button size="b-m" styleType="btn-2" animation="pulse">Cancel</Button>
</div>
</Modal>
);
}
import { Modal, Button } from 'elaspark-ui';
function ModalWithRightAlignedButtons() {
return (
<Modal size="m-l" styleType="style-2">
<p>Your content here ...</p>
<div className="b-container b-r">
<Button size="b-m" styleType="btn-3">Details</Button>
<Button size="b-m" styleType="btn-4" animation="rotate">More</Button>
</div>
</Modal>
);
}
import { Modal, Button } from 'elaspark-ui';
function ModalWithColoredButtons() {
return (
<Modal size="m-m" styleType="style-3">
<h2>Confirm your choice</h2>
<div className="b-container b-c">
<Button size="b-s" styleType="btn-5" borderStyle="b-b-5">Yes</Button>
<Button size="b-s" styleType="btn-6" animation="bounce">No</Button>
</div>
</Modal>
);
}
import { Modal, Button } from 'elaspark-ui';
function ModalWithEvenlySpacedButtons() {
return (
<Modal size="m-xl" styleType="style-4">
<p>Important message ...</p>
<div className="b-container b-auto">
<Button size="b-l" styleType="btn-7">Accept</Button>
<Button size="b-l" styleType="btn-8" animation="shadow">Reject</Button>
</div>
</Modal>
);
}
In this example, the "Save" button stores information in localStorage.
import React from "react";
import { Modal, Button } from "elaspark-ui";
function ModalLocalStorage() {
const handleLocalStorageSave = () => {
localStorage.setItem("myData", "Value to save");
console.log("Data saved in localStorage");
};
return (
<Modal size="m-m" styleType="style-1" backdropStyle="light">
<div className="b-container b-c">
<Button size="b-m" styleType="btn-1" onClick={handleLocalStorageSave}>
Save
</Button>
<Button size="b-m" styleType="btn-2">
Cancel
</Button>
</div>
</Modal>
);
}
import React from "react";
import { Modal, Button } from "elaspark-ui";
function ModalApiSubmit() {
const handleApiSubmit = () => {
fetch("https://myapi.com/send", {
method: "POST",
body: JSON.stringify({ data: "Mes Données" }),
headers: { "Content-Type": "application/json" },
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error("API Error:", error));
};
return (
<Modal size="m-m" styleType="style-1" backdropStyle="dark">
<div className="b-container b-c">
<Button size="b-m" styleType="btn-3" onClick={handleApiSubmit}>
Send API
</Button>
<Button size="b-m" styleType="btn-4">
Cancel
</Button>
</div>
</Modal>
);
}
Created with ❤️ by Stephane-OC
ElaSpark-UI is distributed under the MIT License.
This license permits use, modification, and free distribution, provided that the MIT License text is included with any substantial distribution of the software.
For more information, please refer to the LICENSE
file included with this distribution or visit MIT License.