https://github.com/yunho1017/react-opener

render React Component from anywhere
https://github.com/yunho1017/react-opener

Last synced: about 2 months ago
JSON representation

render React Component from anywhere

• Host: GitHub
• URL: https://github.com/yunho1017/react-opener
• Owner: yunho1017
• License: mit
• Created: 2024-05-21T07:51:02.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-05-28T06:04:26.000Z (8 months ago)
• Last Synced: 2024-05-28T11:36:36.175Z (8 months ago)
• Language: TypeScript
• Homepage:
• Size: 518 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-opener

[![npm](https://img.shields.io/npm/v/react-opener)](https://www.npmjs.com/package/react-opener)

[![size](https://img.shields.io/bundlephobia/minzip/react-opener)](https://bundlephobia.com/result?p=react-opener)

render React Component from anywhere!

[Demo](https://react-opener.vercel.app/)

## Introduction

Previously in order to show Dialog in React, we had to write the code below

```js

const Component = () => {

  const [open, setOpen] = useState(false);

  return (

    


       {

          setOpen(true);

        }}

      >

        open dialog

      


       {

          setOpen(false);

        }}

      />

    

  );

};

```


The code above has Dialog-Related code throughout the Function Component.

If components become complicated, readability becomes poor and maintenance becomes difficult.

This library can show React Component from anywhere to solve this issues.

## Install

This package has peer dependencies, which you need to install by yourself.

```bash

// npm

npm install react-opener react

// yarn

yarn add react-opener react

```

## Usage

### Basic

```javascript

import { ReactOpener, ReactToastOpener } from "react-opener";

const ToastStore = ReactToastOpener.createStore();

const DialogStore = ReactOpener.createStore();

const Container = () => {

  return (

    


       {

          ToastStore.success("toast !");

        }}

      >

        toast

      

       {

          DialogStore.open({

            element: ({ close }) => ,

          });

        }}

      >

        dialog

      

      // Rendered here !

      

      

    

  );

};

```


### useOpener

```javascript

import { ReactOpener } from "react-opener";

const Container = () => {

  const [dialog, opener] = ReactOpener.useOpener();

  return (

    


       {

          dialog.open({

            element: ({ close }) => ,

          });

        }}

      >

        dialog

      

      {opener}

    

  );

};

```