Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ashish-simplecoder/classic-react-components
🚀 A great collections of React utility components
https://github.com/ashish-simplecoder/classic-react-components
component-library components-library jest react resusable-components typescript
Last synced: 3 months ago
JSON representation
🚀 A great collections of React utility components
- Host: GitHub
- URL: https://github.com/ashish-simplecoder/classic-react-components
- Owner: Ashish-simpleCoder
- License: mit
- Created: 2023-04-22T16:45:26.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-16T13:34:25.000Z (6 months ago)
- Last Synced: 2024-10-28T22:20:35.768Z (4 months ago)
- Topics: component-library, components-library, jest, react, resusable-components, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/classic-react-components
- Size: 110 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 classic-react-components
- A Simple React Library of `Utility Components`.
- Write jsx in `maintainable` and `readable` way, and fun too.
## Features
- Comes with treeshaking
- Typescript support
- Small bundle size
- Minimal and Easy to use
## Installation
For npm users
```bash
$ npm install classic-react-components
```
For pnpm users
```bash
$ pnpm install classic-react-components
```
For yarn users
```bash
$ yarn add classic-react-components
```
## Components
- [If](#if)
- [Then](#then)
- [Else](#else)
- [For](#for)
- [Switch](#switch)
### If
| Prop | Type | Required | Default Value | Description |
| --------- | :-------: | :------: | :-----------: | -------------------------------------------------------------------------------------------- |
| condition | any | ❌ | false | Based on evaluation of the condition flag the component will return null or children |
| children | ReactNode | ❌ | null | To render the children |
| suspense | boolean | ❌ | false | Needed to show fallback until its children have finished loading |
| fallback | ReactNode | ❌ | null | Fallback needed to show until the component is loaded fully. Needed for suspensed components |
### Working
- Based on the condition the children are rendered.
- If the condition is true then the childeren will render otherwise it will return null.
- For one children
- If condition is true then children will be rendered.
- If condition is false then null gets returned.
- For multiple children
- If conndition is true then the first children will rendered.
- Otherwise the all of the children will be rendered excluding the first children.
### Example
```tsx
import { If } from 'classic-react-components'
export default function YourComponent() {
return (
{/* Passing only one children and a condition prop */}
it will render.
{/* Passing more than one children and a truthy condition prop */}
it will not render
it will render. As condition it falsy
{/* Passing more than one children and a falsy condition prop */}
it will not render
it will render. As condition it falsy.
it will also render
)
}
```
### Usage with Suspense
```tsx
import { If, Then, Else } from 'classic-react-components'
import { lazy } from 'react'
const YourLazyComponent = lazy(() => import('./YourLazyComponent'))
export default function YourComponent() {
return (
{/* Passing two children, condition and suspense props */}
{/* This component will only download when the condition evaluates to true.
Here condition is falsy, it will not be downloaded. */}
this is will render
)
}
```
### Then
| Prop | Type | Required | Default Value | Description |
| -------- | :-------: | :------: | :-----------: | --------------------------- |
| children | ReactNode | ❌ | null | Renders the passed children |
### Working
- It should be used in-conjunction with `If` commponent.
- It renders the passed children.
### Example
```tsx
import { If, Then } from 'classic-react-components'
export default function YourComponent() {
return (
this will render.
)
}
```
### Else
| Prop | Type | Required | Default Value | Description |
| -------- | :-------: | :------: | :-----------: | --------------------------- |
| children | ReactNode | ❌ | null | Renders the passed children |
### Working
- It should be used in-conjunction with `If` commponent.
- It renders the passed children.
### Example
```tsx
import { If, Then, Else } from 'classic-react-components'
export default function YourComponent() {
return (
this will render.
this will not render.
)
}
```
### For
| Prop | Type | Required | Default Value | Description |
| -------- | :-------: | :------: | :-----------: | ---------------------------------------------- |
| data | Array | ❌ | undefined | Needed for mapping |
| children | ReactNode | ❌ | null | Renders the `JSX` returned from child function |
### Working
- Replacement for Array.map().
- Used to iterate over an array of items and renders the `JSX` based on the provided child function.
### Example
```tsx
import { For } from 'classic-react-components'
import CardComponent from './CardComponent'
export default function YourComponent() {
const Data = [
{ id: 1, course: 'Javascript' },
{ id: 2, course: 'React' },
]
return (
{(item, index) => {
return {item.course}
}}
)
}
```
### Switch
| Prop | Type | Required | Default Value | Description |
| -------- | :-------: | :------: | :-----------: | ---------------------------------------------------------------- |
| item | any | ❌ | undefined | The value of Switch |
| children | ReactNode | ✅ | - | Renders the children of matched case if found, else default case |
### Working
- Renders the children of particular matched case for given prop `item(switch value)`.
- If no case matches for given prop `item`, the `Default` case will be rendered.
> **Note:** The order of Default Case does not matter.
### Example
```tsx
import { Switch } from 'classic-react-components'
import CardComponent from './CardComponent'
export default function YourComponent({ item }: { item: 'coding' | 'sleep' }) {
return (
{({ Case, Default }) => {
return (
<>
coing-case
sleep-case
this is default case
>
)
}}
)
}
```