@uttam_rawat/popups

10.2.1 • Public • Published

@uttam_rawat/popups

A beautiful, responsive, customizable, accessible replacement for javascript's popup boxes The popups will close itself when the close button is clicked, or after a timeout. Popups can be configured to appear at either the top or the bottom of an application window.

Installation

npm i @uttam_rawat/popups

Usage

import React from "react";
import Popup from '@uttam_rawat/popups';

function App() {
  return (
    <div className="App">
      <Popup status={"success"} title={"Add title"} description={"Add Description"} duration={3000} isClosable={true} position={"top"}/>
      <h1>Learn Popups</h1>
      <h1>Learn Popups</h1>     
    </div>
  );
}

export default App;

Status

You can use status to change the color of your popups

import React from "react";
import Popup from '@uttam_rawat/popups';

function App() {
  const status = ['success', 'error', 'warning', 'info']
  return (
    <div className="App">
        // You can use status to change the color of your popups
      <Popup status={"warning"} title={"Add title"} description={"Add Description"} duration={3000} isClosable={true} position={"top"}/>
      <h1>Learn Popups</h1>
      <h1>Learn Popups</h1>
    </div>
  );
}

export default App;

Changing the popups position

Using the position prop you can adjust where your popup will from.

import React from "react";
import Popup from '@uttam_rawat/popups';

function App() {
  const position = [
    'top',
    'top-right',
    'top-left',
    'bottom',
    'bottom-right',
    'bottom-left',
  ];
  return (
    <div className="App">
      <Popup status={"warning"} title={"Add title"} description={"Add Description"} duration={3000} isClosable={true} position={"top"}/>
      <h1>Learn Popups</h1>
      <h1>Learn Popups</h1>
    </div>
  );
}

export default App;

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

Package Sidebar

Install

npm i @uttam_rawat/popups

Weekly Downloads

99

Version

10.2.1

License

MIT

Unpacked Size

596 kB

Total Files

4

Last publish

Collaborators

  • uttam_rawat