https://github.com/mdwahiduzzamanemon/easy-beauty-component-react

It's an open source project for react user to write a clean code with this components (npm i easy-beauty-components---react)
https://github.com/mdwahiduzzamanemon/easy-beauty-component-react

npm npm-package yarn-package

Last synced: 10 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mdwahiduzzamanemon/easy-beauty-component-react
• Owner: MdWahiduzzamanEmon
• License: mit
• Created: 2023-03-08T16:24:06.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-22T16:16:33.000Z (about 1 year ago)
• Last Synced: 2024-04-25T23:22:01.501Z (7 months ago)
• Topics: npm, npm-package, yarn-package
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/easy-beauty-components---react
• Size: 585 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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](https://www.npmjs.com/) to install the package.((please read the documentation first))

```bash

npm i easy-beauty-components---react

```

```bash

yarn add easy-beauty-components---react

```

## Importing

```bash

import { For, Show } from "easy-beauty-components---react";

```

## How to use it

```javascript

### 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 (

    

      {( item, index ) => {

        return (

          


            {item?.name} is {item?.age} years old

          

        );

      }}

    

  );

}


```

### Show Component

```bash

import { useEffect, useState } from "react";

function App() {

  const [show, setShow] = useState(false);

  return (

    <>

       setShow(!show)}>Toggle

      

        
Hello World

      

    >

  );

}


```

```bash

### 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     |

```

```bash

| 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](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.