Some title
Some Paragraph
- 287 bytes - Automatic type inference - Can be imported in `cjs` or `esm` - Full test-coverage
npm install react-utilify- 287 bytes
- Automatic type inference
- Can be imported in cjs or esm
- Full test-coverage
It is a super lightweight (287 bytes) only uility components to make your codebase shine ✨. Pretty much like solidjs style components such as For, Loop, Switch Switch.Case and If.
Here some codes to explore by yourself:
#### 1.
``jsx
import { For } from 'react-utilify';
function Todos() {
const todos = [
{ title: 'TS', name: 'For' },
{ title: 'Jest + RTL', name: 'map' },
];
return (
<>
{(todo, idx) => (
<>
{idx}: {todo.name}
>
)}
>
);
}
`
JS way:
`jsx
import React from 'react';
function Todos() {
const todos = [
{ title: 'TS', name: 'For' },
{ title: 'Jest + RTL', name: 'map' },
];
return (
<>
{todos.map((todo) => {
return (
<>
{idx}: {todo.name}
#### 2.
`jsx
import { If } from 'react-utilify';function Todos() {
return (
<>
Loading...
Error!
+Create task
...
>
);
}
``jsx
import React from 'react';function Todos() {
return (
<>
{isloading ? <>Loading...> : <>''>}
{isError && !isLoading && <>Error!>}
{data.length === 0 && !isError && <>+Create task>}
{data.length > 0 && !isError && <>...>}
>
);
}
`#### 3.
Switch -> Switch.CaseAs opposed to
If Switch Switch.Case renders only the case when is true and stops there!`jsx
function Todos() {
const { loading, error, data } = useAPI(todos); return (
Loading...
Error!
...
);
}
`#### 4.
The use case of this componet is while layouting components and to see multiple components in action we need to copy paste same thing over and over. With this you will do your work much simpler and productively!
`jsx
import { Loop } from 'react-utilify';function Todos() {
return (
Some title
Some Paragraph
);
}
`Want more? Just increase
times prop: times={1000}`