DEV Community

Md Wahiduzzaman Emon
Md Wahiduzzaman Emon

Posted on • Edited on

1

Easy Beauty Components for React

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

Click to go the package

Click to see other packages

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
Enter fullscreen mode Exit fullscreen mode

step-2:

import { For, Show } from "easy-beauty-components---react";
Enter fullscreen mode Exit fullscreen mode

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>
)
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

_

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

Required Props

For Component->
of: Array*

Show Component->
when: Boolean*
FallBack: JSX.Element

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up