@prerak12/chaoscomponents v1.0.8

Introduction

A library built over tailwindcss where you can customize your components as per your needs (not necessary except for colors and some basic props). With just one word change you can switch from normal to google's floating style.

It's that simple!!!

Installation

Install chaoscomponents

npm i @prerak12/chaoscomponents@latest

Ensure you have lucide-react installed:

npm install lucide-react

Input

A customizable React input component with support for various styles, password visibility toggle, and Google-style floating labels.

Features

• Customizable width, height, colors, and border radius.
• Supports normal and Google-style floating labels.
• Password visibility toggle with Lucide icons.
• Fully controlled input with value and setValue props.
• Min and max length constraints.
• Disabled state support.

Usage

Import

import { Input } from '@prerak12/chaoscomponents';
import '@prerak12/chaoscomponents/styles';

The first line imports the input component.

The second line imports the styles for it.

Its necessary to import the styles to make the components look and work as they intend.

Example Usage

import { Input } from '@prerak12/chaoscomponents';
import '@prerak12/chaoscomponents/styles'; 
import { useState } from 'react';

const App = () => {
    const [inputValue, setInputValue] = useState('');
    
    return (
        <Input 
            placeholder="Enter text"
            type="text"
            width="250px"
            height="50px"
            bgColor="#333"
            textColor="white"
            borderColor="blue"
            outlineColor="cyan"
            rounded="md"
            value={inputValue}
            setValue={setInputValue}
        />
    );
};

export default App;

Password Toggle

If type="password", an eye icon will appear to toggle visibility.

Props

Select

A customizable React select dropdown component that supports both single and multiple selection modes. This component features dynamic search, keyboard navigation, and customizable styling for both the select box and its options.

Features

• Single & Multiple Selection: Choose one or multiple options.
• Keyboard Navigation: Use arrow keys to navigate and type to search options.
• Customizable Styles: Easily adjust colors, dimensions, border styles, and more.
• Dynamic Option Scrolling: Automatically scrolls options into view on navigation.
• Toggle Selection: Optionally remove a selected item by clicking it again (in multiple selection mode).

Usage

Import

import { Select } from '@prerak12/chaoscomponents';
import '@prerak12/chaoscomponents/styles';

Example Usage

import { Select } from '@prerak12/chaoscomponents';
import '@prerak12/chaoscomponents/styles'; 

const App = () => {
  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);

  return (
    <div style={{ padding: "20px", backgroundColor: "#222" }}>
      <Select 
        label="Select fruit"
        optionsList={[
          'Apple', 'Banana', 'Mango', 'Orange', 'Pineapple', 'Strawberry'
        ]}
        selectedOptions={selectedOptions}
        setSelectedOptions={setSelectedOptions}
        type="multiple"
        width="300px"
        height="40px"
        bgColor="#333"
        textColor="#fff"
        borderColor="#fff"
        hoverBgColor="#444"
        hoverTextColor="#fff"
        optionsBgColor="#000"
        optionsTextColor="#fff"
        selectedOptionsBgColor="#fff"
        selectedOptionsTextColor="#000"
      />
    </div>
  );
};

export default App;

Props

Button

The Button component is a customizable React button that supports various properties to modify its appearance and behavior. It can display a label or custom children, adjust its dimensions, colors, hover effects, border styles, and more.

Features

• Customizable dimensions (width and height) and padding.
• Dynamic hover effects for background and text colors.
• Support for various border-radius options: none, sm, md, lg, and full.
• Option to disable the button.
• Ability to render custom child elements along with an optional label.

Usage

Import

import { Button } from '@prerak12/chaoscomponents';
import '@prerak12/chaoscomponents/styles';

Example Usage

import Button from './Button';

const App = () => {
  return (
    <div>
      <Button 
        label="Click Me"
        onClick={() => console.log("Button clicked!")}
        width="150px"
        height="50px"
        bgColor="#007BFF"
        textColor="#FFF"
        rounded="md"
        hoverBgColor="#0056b3"
        hoverTextColor="#FFF"
        borderColor="#007BFF"
        gap="8px"
      />
    </div>
  );
};

export default App;

Props