easy-beauty-components---react
v2.0.2
Published
Easy Beauty Components for React
Downloads
61
Maintainers
Keywords
Readme
Easy Beauty Components for React
This is a React component library that contains a lot of components that are used in most of the projects.
Installation
Use the package manager npm/yarn to install the package.((please read the documentation first))
npm i easy-beauty-components---react
yarn add easy-beauty-components---react
Importing
import { For, Show } from "easy-beauty-components---react";
How to use it
### 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>
);
}
Show Component
import { useEffect, useState } from "react";
function App() {
const [show, setShow] = useState(false);
return (
<>
<button onClick={() => setShow(!show)}>Toggle</button>
<Show when={show}>
<h1>Hello World</h1>
</Show>
</>
);
}
### Also you can FallBack prop to show loading or something else when the condition is false in Show Component
### Required Props
| Prop | Type | Required |
| ---- | ----- | -------- |
| of | Array | true |
| children | React Node | true |
| Prop | Type | Required |
| -------- | ----------- | -------- |
| when | Boolean | true |
| FallBack | React Node | false |
| children | React Node | true |
License
This project is licensed under the MIT License - see the LICENSE.md file for details
Author
- [Md Wahiduzzaman Emon]
Contributing
- Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
- Please make sure to update tests as appropriate.