@alex-pqn/react-modal

Prerequisites

• You will need to have Node and npm installed locally on your machine.

| Node Version | Supported | | ------------ | ------------------ | | 16.x & > | :x: | | 15.x | :white_check_mark: |

Install

npm i @alex-pqn/react-modal

Example

Usage

import React, { useState } from 'react';

import { Modal } from '@alex-pqn/react-modal';

const App = () => {
  const [isModalShown, setIsModalShown] = useState(false);

  const openModal = () => setIsModalShown(true);

  return (
    <main>
      <button onClick={openModal}>Open modal</button>

      <Modal
        isShown={isModalShown}
        trigger={setIsModalShown}
        width={27}
        title="Your modal title"
        message="Your modal message"
      />
    </main>
  );
};

export default App;

Props

| Name | Description | Type | Is Required | Default | | ------- | ----------------------------------- | ------------------ | ----------- | ------------------ | | isShown | Is modal shown ? | boolean | Yes | n/a | | trigger | A trigger for turning off the modal | func | Yes | n/a | | width | The modal width | number 1-100 | No | 27 | | title | Your modal title | string | No | Your modal title | | message | Your modal message (can be DOM) | n/a | No | Your modal message |