https://github.com/ahamed/react-hook-modal

A simple hook based react modal package.
https://github.com/ahamed/react-hook-modal

Last synced: about 1 month ago
JSON representation

A simple hook based react modal package.

• Host: GitHub
• URL: https://github.com/ahamed/react-hook-modal
• Owner: ahamed
• Created: 2022-04-17T18:55:09.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-04-18T18:50:02.000Z (over 2 years ago)
• Last Synced: 2024-10-31T17:47:06.423Z (about 2 months ago)
• Language: TypeScript
• Size: 429 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Hook Modal

## Motivation

The basic idea is to open a modal dynamically. For example you can open a modal inside any conditional, on a button click or many more.

This package is created only for using the modal functionalities and leave the modal content component to the user. 

This package is allowing the developers to create their own modal content component and also allowing them to provide extensive

data passing on closing the modal.

## Features

- Hook based implementation

- Easy to use

- Only `showModal` and `closeModal` functions are enough.

- Ability to send custom data after closing the modal.

- Multiple actions on close are available.

- Could be used as a confirm popover.

## Installation

```

npm install @ahamed07/react-hook-modal

```

or

```

yarn add @ahamed07/react-hook-modal

```

## Usage

```tsx

import React from 'react';

import ReactDOM from 'react-dom/client';

import { ModalProvider, useModal } from '@ahamed07/react-hook-modal';

const ModalContent = ({title, content}) => {

	const { closeModal } = useModal();

	return (

    


      
{title}

      
{content}


       closeModal({

          action: 'CLOSE', data: {name: 'john doe', age: 32}

        })}

      >

        Close Modal

      

    

	)

}


const  App = () => {

  const { showModal } = useModal();

  return (

    


      
 React Hook Modal Example 

       {

          const { action } = await showModal({

            component: ModalContent,

            props: {

              title: 'This is a simple modal title',

              content: 'Lorem ipsum dolor...'

            }

          });


          if (action === 'CLOSE') {

            // Do some stuff here

          }

        }}

      >

        Open Modal

      

    

  );

}


const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  

    

  

)

```