This React component library contains components you can use for your simple/large projects to write your code more clean and readable.
This Package has also typescript supported
Documentation for how to use it in your projects:
step-1: first write/paste this to your terminal to install this package (
- npm i easy-beauty-components---react
or
- yarn add easy-beauty-components---react
or
- https://cdn.jsdelivr.net/npm/easy-beauty-components---react/dist/index.min.js
step-2:
import { For, Show } from "easy-beauty-components---react";
How to use For component
import { useEffect, useState } from "react";
function App() {
const [list, setList] = useState([]);
useEffect(() => {
setList([
{ name: "John", age: 20 },
{ name: "Jane", age: 21 },
{ name: "Jack", age: 22 },
]);
}, []);
return (
<For of={list}>
{
({ item, index }) => {
return (
<li key={index}>
{item?.name} is {item?.age} years old
</li>
)
}
}
</For>
)
}
How to use Show component
import { useEffect, useState } from "react";
function App() {
const [show, setShow] = useState(false);
return (
<div>
<button onClick={() => setShow(!show)}>Toggle</button>
<Show when={show}>
<h1>Hello World</h1>
</Show>
</div>
);
}
_
Also you can FallBack prop to show loading or something else when the condition is false in Show Component
_
with Fallback Props-
import { useEffect, useState } from "react";
function App() {
const [show, setShow] = useState(false);
return (
<div>
<button onClick={() => setShow(!show)}>Toggle</button>
<Show when={show} Fallback={<>Loading...</>}>
<h1>Hello World</h1>
</Show>
</div>
);
}
Required Props
For Component->
of: Array*
Show Component->
when: Boolean*
FallBack: JSX.Element
Top comments (0)