React Essentials Kit

The React Reusable Components Library is a comprehensive collection of reusable and customizable components designed to simplify and streamline React development.

How to use

Usage Example: FleetButton Component

The FleetButton component is a versatile button component that supports various styles and customization options. Below is an example of how to use the FleetButton component in your React application:

// Primary Button 
<FleetButton btnStyle="primary">
    Primary
</FleetButton>

// Primary Outline Button
<FleetButton btnStyle="primary-outline">
    Primary Outline
</FleetButton>

// Danger Button With Icon
<FleetButton btnStyle="danger">
    <TrashIcon className="w-4 mr-1" />
    Danger With Icon
</FleetButton>

// Danger Outline Button
<FleetButton btnStyle="danger-outline">
    Danger Outline
</FleetButton>

Usage Example: FleetInput Component

The FleetInput component is a versatile input component that supports various customization options. Below is an example of how to use the FleetInput component in your React application:

// Input without Icon
<FleetInput type="text" name="Demo" value="" placeholder="Input without Icon" className="mb-3" onChange={handleChange} />

// Input with Icon
<FleetInput type="text" name="Demo" value="" placeholder="Input with Icon">
    <EyeIcon className="h-6 font-extralight cursor-pointer" />
</FleetInput>

Usage Example: FleetLabel Component

// Default label
<FleetLabel>Demo*</FleetLabel>

// Label small
<FleetLabel labelStyle="label-sm">Demo*</FleetLabel>

// Label md
<FleetLabel labelStyle="label-md">Demo*</FleetLabel>

// Label lg
<FleetLabel labelStyle="label-lg">Demo*</FleetLabel>

// Label xl
<FleetLabel labelStyle="label-xl">Demo*</FleetLabel>
<FleetInput type="text" name="Demo" value="" placeholder="Input without Icon" className="mb-3" />

Usage Example: FleetTab Component

// Pass tabs variable for tab title
const tabs = [{ title: "Tab 1" }, { title: "Tab 2" }, { title: "Tab 3" }];

// Solid light gray
<Tabs tabs={tabs} tabStyle='solid-light-gray'>
    <p>Tab 1</p>
    <p>Tab 2</p>
    <p>Tab 3</p>
</Tabs>

// Solid light blue
<Tabs tabs={tabs} tabStyle='solid-light-blue'>
    <p>Tab 1</p>
    <p>Tab 2</p>
    <p>Tab 3</p>
</Tabs>

// Block Light Blue
<Tabs tabs={tabs} tabStyle='block-light-blue'>
    <p>Tab 1</p>
    <p>Tab 2</p>
    <p>Tab 3</p>
</Tabs>