Some title
Some Paragraph
react-utilify
v2.0.34TypeScript
- 287 bytes - Automatic type inference - Can be imported in `cjs` or `esm` - Full test-coverage
0/weekUpdated 2 years agoMITUnpacked: 7.8 KB
Published by Babur
npm install react-utilifywidth="100%"
/>
Solidjs style utility components in React that is just 287 bytes!
$3
- 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.
$3
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 (
<>
{todo.title}
{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.
As opposed to
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 (
);
}
`Want more? Just increase
prop: times={1000}`