use-tgl

ğŸŽ© useTgl is a React Hook toggle component visibility.

Stats

StarsIssuesVersionUpdatedCreatedSize
use-tgl
840.4.13 months ago3 months agoMinified + gzip package size for use-tgl in KB

Readme

ğŸŽ© use-tgl

useTgl is a React Hook toggle component visibility.

build version MIT License downloads


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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.