popify

v0.2.0
A small library for building popups/notifications in React. Built with simplicity and accessibility in mind.
popify popup alert notification styled-components react

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 ๐Ÿ‘€

Name Type Default value Description
onClose `(() => any) (() => Promise)` undefined
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
styles `FlattenSimpleInterpolation FlattenInterpolation` undefined
npm i popify

Metadata

  • MIT
  • Whatever
  • Jozef Hruลกka
  • released 6/14/2020

Downloads

Maintainers