🎩 use-tgl
useTgl is a React Hook toggle component visibility.
!buildbuild-badgebuild !versionversion-badgepackage !MIT Licenselicense-badgelicense !downloadsdownloads-badgenpmtrends
Table of Contents
Motivation
- Simplify the toggle action for components like Modals, Dialogs, Checkbox;
Usage
Installuse-tgl
in your project with the following:yarn add use-tgl
or npm install use-tgl
Simplify component toggle:
import useTgl from 'use-tgl';
export function App() {
const { enabled, on, off, toggle } = useTgl(true); // => Optional start value
useEffect(() => {
toggle(); // => Disable toggle on render
}, []);
return enabled ? (
<div>
Enabled
<button type="button" onClick={off}>
Disable
</button>
</div>
) : (
<div>
Disabled
<button type="button" onClick={on}>
Enable
</button>
</div>
);
}