React modal component

Requirements

• Node.js v16.19.1 or latest
• react v18.2.0 or latest
• react-dom v18.2.0 or latest
• IntelliJ IDEA or VScode are recommended

Installation

Link to package

To install, you can use npm or yarn:

$ npm install --save @cynthiaaa_crn/success-modal
$ yarn add @cynthiaaa_crn/success-modal

References

• open: (boolean) weather the modal is shown or not
• setOpen: (function) the method handling the change of the open value
• containerStyle: (object) style of the modal container

Examples

Here is a simple example of react-modal being used in an app with some custom styles:

import React from 'react';
import ReactDOM from 'react-dom';
import { SuccessModal } from "@cynthiaaa_crn/success-modal";

function App() {
  const [modalIsOpen, setIsOpen] = React.useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      
      <SuccessModal
        isOpen={modalIsOpen}
        setOpen={setIsOpen}
        containerStyle={{
          top: '50%',
          left: '50%',
          right: 'auto',
          bottom: 'auto',
          marginRight: '-50%',
          transform: 'translate(-50%, -50%)',
        }}
      >
        <h2>Hello</h2>
        <button onClick={() => setIsOpen(false)}>close</button>
        <div>I am a modal</div>
      </SuccessModal>
    </div>
  );
}

ReactDOM.render(<App />, appElement);