dry-components

A lightweight React component library built with Tailwind CSS for styling. This library contains a collection of reusable components, making it easy to integrate into your projects.

Features

• Built using JSX
• Styled with Tailwind CSS
• Simple and reusable component structure
• Customizable with Tailwind CSS classes

Installation

First, install the library via npm:

npm install dry-components

Usage

To use any component from the library, import it into your project like so:

import { Input } from 'dry-components';
import { TextArea } from 'dry-components';
import { SelectInput } from 'dry-components';
import { PrimaryButton } from 'dry-components';

Input Component Props

| Prop Name | Type | Required | Description | |-------------|----------|----------|-----------------------------------------------------------------------------------------------------------| | value | string | Yes | The current value of the input field. | | name | string | Yes | The name of the input field. Typically used for form handling. | | type | string | Yes | The type of the input (e.g., text, password, email, etc.). | | handleChange | function | Yes | The function to handle the change event for the input field. | | width | string | No | Optional width of the input container, default is w-full. Accepts Tailwind CSS width classes. | | label | string | No | Placeholder text for the input field. If not provided, the placeholder will be empty. |

TextArea Component Props

| Prop Name | Type | Required | Description | |-------------|----------|----------|-----------------------------------------------------------------------------------------------------------| | value | string | Yes | The current value of the text area. | | name | string | Yes | The name of the text area. Typically used for form handling. | | type | string | No | The type of the text area (not commonly used for textarea, but included for consistency). | | handleChange | function | Yes | The function to handle the change event for the text area. | | width | string | No | Optional width of the text area container, default is w-full. Accepts Tailwind CSS width classes. | | label | string | No | Placeholder text for the text area. If not provided, the placeholder will be empty. | | rows | number | No | Number of visible text lines. Defaults to 5. |

SelectInput Component Props

| Prop Name | Type | Required | Description | |-------------|------------|----------|-----------------------------------------------------------------------------------------------------------| | value | string | Yes | The current value of the selected option. | | name | string | Yes | The name of the select input. Typically used for form handling. | | options | Array<{ value: string, label: string }> | Yes | Array of option objects where each object has a value and a label property. | | handleChange | function | Yes | The function to handle the change event for the select input. | | width | string | No | Optional width of the select input container, default is w-full. Accepts Tailwind CSS width classes. | | label | string | No | Placeholder text for the select input. This will be shown as a disabled option when no option is selected. |

PrimaryButton Component Props

| Prop Name | Type | Required | Description | |-----------|----------|----------|--------------------------------------------------------------------------------------------------| | label | string | Yes | The text to display inside the button. | | onClick | function | Yes | The function to call when the button is clicked. | | width | string | No | Optional width of the button container, default is w-fit. Accepts Tailwind CSS width classes. | | variant | string | No | The button style variant. Options include outlined and default (filled). |