Skip to content

🎩 useTgl() is a React Hook toggle component visibility.

License

Notifications You must be signed in to change notification settings

helderberto/use-tgl

Repository files navigation

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

About

🎩 useTgl() is a React Hook toggle component visibility.

Resources

License

Stars

Watchers

Forks

Packages

No packages published