https://github.com/sagardwivedi/utility-components
Collection of utility components
https://github.com/sagardwivedi/utility-components
bun nextjs react
Last synced: 2 months ago
JSON representation
Collection of utility components
- Host: GitHub
- URL: https://github.com/sagardwivedi/utility-components
- Owner: sagardwivedi
- Created: 2024-04-07T04:11:53.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-04-07T15:56:58.000Z (about 2 years ago)
- Last Synced: 2025-01-13T17:50:31.149Z (over 1 year ago)
- Topics: bun, nextjs, react
- Language: TypeScript
- Homepage:
- Size: 41 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Utility Components
A collection of reusable React components for common tasks
## Installation
You can install the package via npm:
```bash
npm install sagar-utility-components
```
Or via yarn:
```bash
yarn add sagar-utility-components
```
Or via bun:
```bash
bun add sagar-utility-components
```
After installation, you can import the components in your React application as follows:
```jsx
import { Each, Show } from "sagar-utility-components";
```
## Components
### Each
The `Each` component is used for rendering each item in an array.
#### Usage
```jsx
} />
```
#### Props
- `of` (`T[]`): The array of items to render.
- `render` (`(item: T, index: number) => React.ReactNode`): A function that takes an item from the array and returns its rendering.
### Show
The `Show` component is used for conditionally rendering its children based on a condition.
#### Usage
```jsx
This is rendered when condition is true.
This is rendered otherwise.
```
#### Props
- `children` (`ReactNode`): ReactNode to be conditionally rendered.
### ShowWhen
The `ShowWhen` component is used as a child of `Show` to render its children when a condition is true.
#### Usage
```jsx
This is rendered when condition is true.
```
#### Props
- `isTrue` (`boolean`): Condition to be evaluated.
### ShowElse
The `ShowElse` component is used as a child of `Show` to render its children or a specified render prop if provided.
#### Usage
```jsx
This is rendered when condition is true.
This is rendered otherwise.
```
#### Props
- `children` (`ReactNode`): ReactNode to be rendered.
- `render` (`ReactNode`): Alternative ReactNode to be rendered if provided.