DEV Community

Mahmoud Elmahdi
Mahmoud Elmahdi

Posted on

React Utility Components

#react #npm #typescript

Reusable react components to maximize your coding efficiency.

Install 

npm i @melmahdi/reactuc
Enter fullscreen mode Exit fullscreen mode

Components

  • If
  • Image
  • Iterate
  • Table

Usage

If

Conditional rendering component

import { If } from "@melmahdi/reactuc";

<If condition={condition: 1 | 0} otherwise={otherwise: ReactNode}>
  ...
</If>
Enter fullscreen mode Exit fullscreen mode

Image

Component to handle broken images

import { Image } from "@melmahdi/reactuc";

<Image fallback={...} src="..." alt="..." />
Enter fullscreen mode Exit fullscreen mode

Iterate

Component to handle iterations.

Display list of paragraph (with html tag):

import { Iterate } from '@melmahdi/reactuc';

<Iterate data={['...', '...', '...']} element="p" />;
Enter fullscreen mode Exit fullscreen mode

Display list of objects (with component):

import { Iterate } from "@melmahdi/reactuc";

const cards = [
  { id: '75ebc192', title: 'Lira Fresh Optimization' },
  ...
];

<Iterate data={users} element={UserComponent} />;
Enter fullscreen mode Exit fullscreen mode

Table

Table component

import { Table } from "@melmahdi/reactuc";

const tableData = {
  head: ['First', <button type="button">Action</button>],
  body: [
    ['One', 'Two'],
    ...,
  ]
};

<Table {...data} />
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

hitesh_developer profile image

Design Powerful Dashboards with These Must-Have Next.js Admin Templates

Hitesh Chauhan -

alfredosalzillo profile image

The React `useInsertionEffect` Hook

Alfredo Salzillo -

wittedtech-by-harshit profile image

🚀 Inside the Frontend Magic of YouTube: A Deep Dive into the Architecture Powering One of the World’s Largest Platforms

Harshit Singh -

mana95 profile image

Understanding about React Outlet with proper routing

Manoj Prasanna 🚀 -