cute-emojies-modal
v1.1.0
Published
A fun and customizable modal package for React, letting you easily add emoji-based confirmation dialogs to your app!
Downloads
651
Maintainers
Readme
Cute Emojies Modal
A fun and customizable modal package for React, letting you easily add emoji-based confirmation dialogs to your app!
Check out the live demo of the modal in action.
Installation
You can install the package via yarn or npm:
yarn add cute-emojies-modal
or
npm install cute-emojies-modal
Usage
Step 1: Add the CSS
To use the styles provided by the package, import the CSS file in your index.ts (or index.js):
import 'cute-emojies-modal/dist/index.css';
Step 2: Add the Modals Container
To enable modals, ensure you add the CuteEmojiesConfirmContainer component to the app root. This is usually done in your main index.tsx file:
import { CuteEmojiesConfirmContainer } from 'cute-emojies-modal';
...
root.render(
<React.StrictMode>
<App />
<CuteEmojiesConfirmContainer /> // add this line
</React.StrictMode>
);
Step 3: Use the Modal in Your Components
Now you can easily trigger modals in your components using the useCuteModal hook:
import { useCuteModal } from 'cute-emojies-modal';
function App() {
const modal = useCuteModal();
const onShowClick = async () => {
await modal({
title: 'Lovely',
body: 'Woho! Now you have 3 new badges!',
variant: 'yellow',
emoji: 2,
});
};
return (
<div>
<button onClick={onShowClick}>Show Modal</button>
</div>
);
}
export default App;
Available Variants
The variant property controls the color scheme of the modal. You can choose from the following options:
- mint-green
- orange
- light-purple
- purple
- light-blue
- yellow
Available Emojis
The emoji property allows you to choose which emoji to display in the modal. You can select a number between 1 and 10.