🎩 use-tgl

useTgl is a React Hook toggle component visibility.

---

Table of Contents

• Motivation
• Usage
• Contributing
• Bugs and Sugestions
• License

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 © helderberto