Skip to content

It's an open source project for react user to write a clean code with this components (npm i easy-beauty-components---react)

License

Notifications You must be signed in to change notification settings

MdWahiduzzamanEmon/Easy-Beauty-Component-React

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 [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.

About

It's an open source project for react user to write a clean code with this components (npm i easy-beauty-components---react)

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published