react-toggle-management
Version:
A lightweight React library for managing toggleable global state—designed to be simpler than Zustand and more focused than Redux.
102 lines (77 loc) • 2.08 kB
Markdown
A lightweight React library for managing toggleable global state—designed to be simpler than Zustand and more focused than Redux.
Install the package via npm or yarn:
```bash
npm install react-toggle-management
yarn add react-toggle-management
pnpm install react-toggle-management
bun install react-toggle-management
```
Wrap the ToggleGlobalProvider component at your layout.
```tsx
import React from "react";
import { ToggleGlobalProvider } from "react-toggle-management";
const LayoutProvider = ({ children } : { children: ReactNode }) => {
return (
<div>
<ToggleGlobalProvider>
{children}
</ToggleGlobalProvider>
</div>
);
};
export default LayoutProvider;
```
Import useToggle hook to handle toggle state
```tsx
import { useToggle } from 'react-toggle-management'
export default function Component1() {
const { toggle, isOpen, open, close, reset } = useToggle('toggle-key-input')
return (
<div className="space-y-2 space-x-3 p-5">
<button onClick={toggle}>
Toggle
</button>
<button onClick={open}>
Open
</button>
<button onClick={close}>
Close
</button>
<button onClick={reset}>
Reset
</button>
<p>isOpen: {isOpen ? 'true' : 'false'}</p>
</div>
)
}
```
Read or trigger other toggle state
```tsx
export default function Component2() {
const { toggle, getIsOpen } = useToggle('toggle-key-input-2')
const toggle1IsOpen = getIsOpen('toggle-key-input-1')
const triggerToggle1 = () => toggle('toggle-key-input-1')
return (
<div className="space-y-2 space-x-3 p-5">
<button onClick={triggerToggle1}>
Toggle
</button>
</div>
)
}
```
Make sure you have `react` and `react-dom` installed:
```bash
npm install react react-dom
```
This project is licensed under the MIT License.
---
If you have any questions or issues, feel free to open an issue or contact the maintainer.