0.2.0 • Published 4 years ago

popify v0.2.0

Weekly downloads
2
License
MIT
Repository
github
Last release
4 years ago

Popify 🍾

A small library for building popups/notifications in React. Built with simplicity and accessibility in mind.

stable license

Examples 😲

Edit popify-basic

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 👀

NameTypeDefault valueDescription
onClose(() => any) | (() => Promise<any>)undefinedFunction to be called after popup is closed.
primaryButtonButtonHTMLAttributes<HTMLButtonElement>undefinedObject containing properties passed to primary button.
secondaryButtonButtonHTMLAttributes<HTMLButtonElement>undefinedObject containing properties passed to secondary button.
showCloseIconbooleantrueShows and hides close button.
position'left' | 'right'rightSpecifies the position of popup window.
stylesFlattenSimpleInterpolation | FlattenInterpolation<any>undefinedPass styled-component's css result to add custom styles.