flash-package
v0.3.2
Published
A highly customizable and lightning-fast component library featuring Input Text, Number, Checkbox, Dropdown, Color Picker, and more. Modify colors, fonts, and styles to suit your needs.
Downloads
7
Maintainers
Readme
flash-component
A highly customizable and lightning-fast component library featuring Input Text, Number, Checkbox, Dropdown, Color Picker, and more. Modify colors, fonts, and styles to suit your needs.
Components
InputText: A customizable text input component with placeholder, label, and icon support. InputNumber: A number input field for numeric data, with customizable label, icon, and helper text. RadioButton: An elegant radio button for selection, customizable orientation and icons. ToggleSwitch: A toggle switch for enabling or disabling options, with customizable labels and icons. Checkbox: A flexible checkbox input with customizable label, icons, and orientation. Dropdown: A select dropdown with support for icons and multiple options. TextArea: A text area for multi-line input, customizable rows, columns, and labels. ColorPicker: A color picker component to choose colors with icon and customizable label. Slider: A customizable range slider with step intervals and labels.
Installation
npm install flash-component
Components
import {
Checkbox,
ColorPicker,
Dropdown,
InputNumber,
InputText,
RadioButton,
Slider,
TextArea,
ToggleSwitch,
} from "flash-package";
import "flash-package/dist/index.css";
import { useState } from "react";
const options = [
{ value: "Option 1", label: "Always Off" },
{ value: "Option 2", label: "Option 2" },
{ value: "Option 3", label: "Option 3" },
];
export default function App() {
const [form, setForm] = useState({
text: "dd",
number: 9,
radio: "radio1",
toggle: true,
checkbox: true,
dropDown: "",
textarea: "textAreaaaa",
color: "#000000",
slider: 2,
});
const onChange = (name: string, value: string | boolean | number) => {
setForm((prevState: any) => ({
...prevState,
[name]: value,
}));
};
return (
<div className="w-[100%] h-[100%]">
<InputText
name="username" //Required
value={form?.username} //Required
onChange={onChange} //Required
label="Username"
placeholder="Username"
className="textClassName" //To Target CSS class
fieldName="fmt"
orientation="vertical" //vertical | horizontal | horizontal_reverse | vertical_reverse
helperText="help text"
disabled={false}
icon={<Icon />}
// ref={}
/>
<InputNumber
name="number" //Required
value={form?.number} //Required
onChange={onChange} //Required
label="Number"
fieldName="num"
icon={<Icon />}
placeholder="place"
orientation="vertical"
className="numberClassName"
disabled={false}
helperText="help text"
// ref={}
/>
<RadioButton
name="radio" //Required
onChange={onChange} //Required
orientation="horizontal"
helperText="helpertext"
icon={<Icon />}
value="radio1"
isSelected={form?.radio === "radio1"} //Required
label="Yes, the survey was conducted"
className="radioClassName"
disabled={false}
// ref={}
/>
<RadioButton
name="radio"
onChange={onChange}
orientation="horizontal"
helperText="helpertext"
icon={<Icon />}
value="radio2"
isSelected={form?.radio === "radio2"}
label="Yes, the survey was conducted"
className="radioClassName"
disabled={false}
// ref={}
/>
<ToggleSwitch
name="toggle" //Required
labelText="LPR Detection"
onChange={onChange} //Required
value={form?.toggle} //Required
className="toogleSwitchClassName"
labelA="ENABLE"
labelB="DISABLE"
sideLabel={true}
disabled={false}
// ref={}
/>
<Checkbox
name="checkbox" //Required
onChange={onChange} //Required
value={form?.checkbox} //Required
label="CHeckBox"
icon={<Icon />}
orientation="vertical"
disabled={false}
className="checkboxClassName"
// ref={}
/>
<Dropdown
name="dropDown" //Required
value={form?.dropDown} //Required
options={options} //Required
label="Alert with sound"
onChange={onChange} //Required
Lefticon={<Icon />}
Righticon={<Icon />}
slice={10}
className="dropdownClassName"
disabled={false}
// ref={}
/>
<TextArea
name="textarea" //Required
onChange={onChange} //Required
value={form?.textarea} //Required
label="Textarea label"
cols={3} //Required
rows={3} //Required
icon={<Icon />}
placeholder="place"
orientation="vertical"
className="textareaClass"
disabled={false}
helperText="helper text"
// ref={}
/>
<ColorPicker
name="color" //Required
value={form?.color} //Required
icon={<Icon />}
label="color picker"
onChange={onChange} //Required
orientation=""
defaultDiv={<p>color pic</p>}
className="colorPickerClassName"
disabled={false}
// ref={}
/>
<Slider
name="slider" //Required
value={form?.slider} //Required
label="Slider Label"
max={10} //Required
min={0} //Required
icon={<Icon />}
onChange={onChange} //Required
step={2}
orientation="vertical"
className="sliderClassName"
disabled={false}
// ref={}
/>
</div>
)
}