https://github.com/yeliex/use-open

hooks for react component open state, and call with method
https://github.com/yeliex/use-open

Last synced: about 2 months ago
JSON representation

hooks for react component open state, and call with method

• Host: GitHub
• URL: https://github.com/yeliex/use-open
• Owner: yeliex
• License: mit
• Created: 2024-01-19T07:28:30.000Z (12 months ago)
• Default Branch: master
• Last Pushed: 2024-08-27T07:29:39.000Z (4 months ago)
• Last Synced: 2024-08-27T08:44:26.246Z (4 months ago)
• Language: JavaScript
• Size: 52.7 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-open

hooks for react component open state, and call with method

support antd, mui, shadcn/ui and any other react components

## Install

```bash

yarn add use-open

```

## Usage

```tsx

// page/index.tsx

const Page = () => {

    const opener = useOpen();

    return (

        <>

             opener.open()}>

                click

            

            

        >

    );

};

// components/Modal.tsx

import { createPortal } from 'react-dom';

import { OpenInstance, useOpen, useOpenProps } from './index';

// component original props

interface IProps {

}

interface OpenProps {

    onConfirm: () => void;

}

const Modal = (props: IProps & {

    opener: OpenInstance

}) => {

    const openProps = useOpenProps(props.opener);

    return createPortal((

        

            modal

             openProps.onConfirm() && openProps.close()}

            >

                click

            

        

    ), document.body);

};

```

### Shared open status/Single instance mode

```tsx

// components/Modal.tsx

interface OpenProps {

    

}

export const opener = createOpener();

const Modal = () => {

    const openProps = useOpenProps(opener);

    

    return (

        

    )

}

// page/index.tsx

import Modal, { opener } from 'components/Modal';

const Page = () => {

    const handler = () => {

        opener.open();

    }

    

    return (

        <>

            

                click

            

            

        >

    )

}

```