use-tgl

🎩 useTgl is a React Hook toggle component visibility.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
use-tgl
9100.4.13 years ago3 years agoMinified + gzip package size for use-tgl in KB

Readme


Table of Contents



Motivation

  • Simplify the toggle action for components like Modals, Dialogs, Checkbox;

Usage

Install use-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>
  );
}

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Bugs and Sugestions

Report bugs or do suggestions using the issues.

License

MIT License © helderburato