React Component Collection

A modern and flexible React component library built with TypeScript, Storybook, Styled Components, and Rollup. This library offers a collection of reusable, customizable UI components that are easy to integrate and enhance your React projects.

Features

• TypeScript: Fully typed components for better development experience and type safety.
• Styled Components: Use of styled-components for modular and customizable CSS-in-JS styling.
• Storybook: Built-in Storybook integration for live component demos and documentation.
• Rollup: Optimized bundling with Rollup for production-ready code.

Installation

To install the library via npm, run:

npm install react-ui-elements-drs

or

yarn add react-ui-elements-drs

Usage

Once you've installed the library, you can easily start using the components in your React project. Below is an example of how to use the components, customize them, and integrate them with your application.

Basic Example

First, import the component(s) you want to use and then include them in your JSX.

import React from "react";
import { Button } from "react-ui-elements-drs";

const App = () => {
  return (
    <div>
      <Button onClick={() => alert("Button clicked!")}>Click Me</Button>
    </div>
  );
};

export default App;

Components

This library includes the following components:

• Accordion: A collapsible container used to group content in expandable sections. Ideal for FAQs, menu items, or lists.
• Avatar: A component used to display a user's profile image or initials. It's commonly used for user profiles, comments, or social media.
• Badge: A small component used to display a status or count.
• Breadcrumbs: A navigation aid that displays the user's current position in a website's hierarchy.
• Button: A clickable element that triggers actions. It supports various styles and sizes.
• Button Group: A collection of buttons grouped together to form a cohesive set, typically used for grouping related actions.
• Card: A flexible and customizable container that can display content, images, or a mix of both, commonly used in dashboards or product listings.
• Carousel: A component that allows you to cycle through a collection of items or images, typically with next/prev navigation controls.
• Clock: A live updating clock component that displays the current time.
• Datepicker: A calendar-style component that lets users select a date from a calendar interface, often used in forms.
• Dropdown: A menu that displays a list of options when triggered, often used for selecting items or actions.
• Form Validation: A set of utility components used to validate and display error messages for user input fields in forms.
• Input: A customizable input field, commonly used for forms, search bars, or collecting user data.
• List: A component that displays a list of items, ideal for use in menus, navigation, or displaying dynamic content.
• Modal: A pop-up dialog that overlays content on top of the page, often used for confirmations, alerts, or displaying detailed information.
• Pagination: A component used for dividing large amounts of data or content into manageable pages, allowing users to navigate between pages.
• Progress Bar: A component used to visually represent the progress of a task or action, such as file uploads, downloads, or process completion.
• Rating: A component used to capture and display ratings, typically through stars or other icons, useful for reviews or feedback.
• Search Bar: A component used to collect search input from users, often integrated with autocomplete functionality.
• Sidebar: A side navigation panel that provides additional options or menu items, commonly used in dashboards and navigation menus.
• Slider: A component that allows users to select a value from a range by dragging a slider. Commonly used for adjusting volume, brightness, or settings.
• Spinner: A loading indicator component, often used to show that content is being loaded or a task is in progress.
• Stopwatch: A timer component that counts upwards or downwards, useful for timing events or tasks.
• Table: A component used to display tabular data in rows and columns.
• Tabs: A component that allows users to navigate between different content sections or views by selecting tab items, often used for categorizing content.
• Textarea: A multi-line text input field that allows users to input large blocks of text, typically used for comments, reviews, or messages.
• Timepicker: A component that allows users to select a time, often paired with a datepicker for scheduling or event planning.
• Toast: A non-intrusive notification that pops up briefly to inform users of an action or status.
• Toggle: A binary switch component that allows users to toggle between two states (e.g., on/off, enabled/disabled).
• Tooltip: A small pop-up box that appears when a user hovers over an element, providing additional information or context.