A React hook to toggle visibility of components
A React hook to toggle the visibility of components.
You can install the package via npm:
``bash`
npm install @pivanov/use-toggle-visibility
or via yarn:
`bash`
yarn add @pivanov/use-toggle-visibility
Here's an example of how to use the useToggleVisibility hook in your React component:
`tsx
import React from 'react';
import { useToggleVisibility } from '@pivanov/use-toggle-visibility';
const MyComponent = (props: { message: string }) => {
return
const App = () => {
const [ToggledComponent, toggleVisibility, isVisible] = useToggleVisibility(MyComponent, false);
return (
export default App;
`
#### useToggleVisibility
`typescript`
const [Component, toggleVisibility, isVisible] = useToggleVisibility(WrappedComponent, initialVisibility);
##### Parameters
- WrappedComponent: The component to be toggled.initialVisibility
- (optional): The initial visibility state of the component. Defaults to false.
##### Returns
- Component: The wrapped component that will be conditionally rendered.toggleVisibility
- : A function to toggle the visibility of the component. It can be called with an optional event and an optional boolean to explicitly set the visibility state.isVisible`: The current visibility state of the component.
-
Contributions are welcome! Please open an issue or submit a pull request.
This project is licensed under the MIT License.