0.2.0 • Published 4 years ago
popify v0.2.0
Popify 🍾
A small library for building popups/notifications in React. Built with simplicity and accessibility in mind.
Examples 😲
Installation 🛠
npm install popify
Usage ❓
import React from 'react';
import { Popup } from 'popify';
const App: React.FC = () => {
return (
<>
<main>Hello!</main>
<Popup
onClose={() => console.log('onClose')}
primaryButton={{
children: 'Thanks!',
onClick: () => console.log('onClick - Primary'),
}}
secondaryButton={{
children: 'Yeah sure...',
onClick: () => console.log('onClick - Secondary'),
}}
>
Welcome on our page! You're the 1000th visitor, here's your free iPad!
</Popup>
</>
);
};
export default App;
Props 👀
Name | Type | Default value | Description |
---|---|---|---|
onClose | (() => any) | (() => Promise<any>) | undefined | Function to be called after popup is closed. |
primaryButton | ButtonHTMLAttributes<HTMLButtonElement> | undefined | Object containing properties passed to primary button. |
secondaryButton | ButtonHTMLAttributes<HTMLButtonElement> | undefined | Object containing properties passed to secondary button. |
showCloseIcon | boolean | true | Shows and hides close button. |
position | 'left' | 'right' | right | Specifies the position of popup window. |
styles | FlattenSimpleInterpolation | FlattenInterpolation<any> | undefined | Pass styled-component's css result to add custom styles. |