https://github.com/pivanov/use-toggle-visibility
https://github.com/pivanov/use-toggle-visibility
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/pivanov/use-toggle-visibility
- Owner: pivanov
- Created: 2024-06-12T12:29:26.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-06-12T12:49:22.000Z (11 months ago)
- Last Synced: 2025-03-30T08:02:25.226Z (about 2 months ago)
- Language: TypeScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @pivanov/use-toggle-visibility
A React hook to toggle the visibility of components.
## Installation
You can install the package via npm:
```bash
npm install @pivanov/use-toggle-visibility
```
or via yarn:
```bash
yarn add @pivanov/use-toggle-visibility
```
## Usage
### Basic Usage
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
{props.message};
};
const App = () => {
const [ToggledComponent, toggleVisibility, isVisible] = useToggleVisibility(MyComponent, false);
return (
toggleVisibility(e)}>
{isVisible ? 'Hide' : 'Show'}
);
};
export default App;
```
### API
#### `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.
### Contributing
Contributions are welcome! Please open an issue or submit a pull request.
### License
This project is licensed under the MIT License.