https://github.com/jsun969/react-hook-dialog

💬 React hooks for master your dialog(modal) component
https://github.com/jsun969/react-hook-dialog

dialog hook modal popup react react-hooks

Last synced: over 1 year ago
JSON representation

💬 React hooks for master your dialog(modal) component

• Host: GitHub
• URL: https://github.com/jsun969/react-hook-dialog
• Owner: jsun969
• License: mit
• Created: 2022-07-12T11:41:22.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-03-03T18:03:51.000Z (over 3 years ago)
• Last Synced: 2024-10-14T08:34:36.526Z (over 1 year ago)
• Topics: dialog, hook, modal, popup, react, react-hooks
• Language: TypeScript
• Homepage: https://npm.im/react-hook-dialog
• Size: 279 KB
• Stars: 49
• Watchers: 2
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          


# 💬 React Hook Dialog

React hooks for master your dialog(modal) component

[![version](https://img.shields.io/npm/v/react-hook-dialog?style=for-the-badge)](https://www.npmjs.com/package/react-hook-dialog)

[![license](https://img.shields.io/npm/l/react-hook-dialog?style=for-the-badge)](https://github.com/jsun969/react-hook-dialog/blob/main/LICENSE)

[![size](https://img.shields.io/bundlephobia/minzip/react-hook-dialog?style=for-the-badge)](https://bundlephobia.com/result?p=react-hook-dialog)

English | [简体中文](./README_zh-CN.md)



## ✨ Features

- 🧙‍♂️ TYPE SAFE

- 🐎 Awesome DX

- 🍃 Super light

## 🕶 Example

- [Material UI](https://codesandbox.io/s/rhd-mui-example-etwz20)

- [Ant Design](https://codesandbox.io/s/rhd-antd-example-qhj7zy)

## 📦 Installation

```bash

npm install react-hook-dialog

```

## 🎯 Quickstart

`lib/dialog.ts`

```tsx

import { createDialogs, createDialogHooks } from 'react-hook-dialog';

export const dialogs = createDialogs({

  customDialog: { title: '', content: '' },

});

export const dialog = createDialogHooks(dialogs);

```

`components/CustomDialog.tsx`

```tsx

import { Dialog } from 'your-ui-lib';

import { dialog } from '../lib/dialog';

const CustomDialog = () => {

  const { isOpen, handleClose, props } =

    dialog.useDialogController('customDialog');

  return (

    

      
{props.title}

      
{props.content}

    

  );

};


export default CustomDialog;

```

`main.tsx`

```tsx

import React from 'react';

import ReactDOM from 'react-dom/client';

import { DialogProvider } from 'react-hook-dialog';

import App from './App';

import CustomDialog from './components/CustomDialog';

import { dialogs } from './lib/dialog';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(

  

    

      

      

    

  ,

);

```

`anywhere`

```tsx

import { dialog } from 'dir to lib/dialog';

const YourComponent = () => {

  const { open, close, isOpen } = dialog.useDialog('customDialog', {

    title: 'Some Title',

    content: 'some content',

  });

  return (

    <>

      
Dialog Status: {isOpen ? 'open' : 'closed'}

       open()}>Open Dialog

       close()}>Close Dialog

       open({ title: 'Another Title' })}>

        Open Another Dialog

        {/* { title: 'Another Title', content: 'some content' } */}

      

    >

  );

};


export default YourComponent;

```

## 🕹 API

### 🔗 `createDialogs`

Initialize your dialogs name and props

```ts

const dialogs = createDialogs({

  firstDialogName: {

    title: '',

    content: '',

  },

  secondDialogName: {

    lol: '',

    olo: '',

  },

});

```

### 🔗 `DialogProvider`

```tsx

  

  

  

```

### 🔗 `createDialogHooks`

Create type-safe dialog hooks

```ts

const dialog = createDialogHooks(dialogs);

```

### 🔗 `useDialogController`

A hook to control your dialog component

```tsx

const { isOpen, handleClose, props } = dialog.useDialogController('dialogName');

return 

```

### 🔗 `useDialog`

A hook to use any dialogs anywhere!

> **Note**  

> You may have found that the dialog props can be defined in 3 places  

> Priority: `open` > `useDialog` > `createDialogs`

```tsx

const { open, close, isOpen } = dialog.useDialog(

  'dialogName',

  { title: 'New Title' }, // Dialog props

);

```

```tsx

<>

  
Dialog Status: {isOpen ? 'open' : 'closed'}

   open({ title: 'New New Title' })}>Open

   close()}>Close

>

```