Rdy Admin Panel Package
npm install rdy-dashboard
javascript
id="email"
label="E-mail"
type="email"
rounded="md"
bordered={{
onFocus: 'green',
onBlur: 'blue',
}}
/>
`
$3
`javascript
{...register('email')} //add attr register from useForm() react-hook-form
id="email"
label="E-mail"
type="email"
rounded="md"
bordered={{
onFocus: 'green',
onBlur: 'blue',
}}
/>
`
$3
| Prop | Type | Usage |
| --------------| --------|-----------------------------------------|
| type | type?: "text" / "password" / "email" / "number" / "search" | type="text" |
| placeholder | placeholder?: string / "" | placeholder="Введите данные" |
| className | className?: string | className="inputClass" |
| id | id: string | id="name" |
| label | label?: string | label="Label title" |
| error | error?: string | error="Value is must required" |
onFocus?: string, onBlur?: string | onFocus="red" |
onBlur="white" |
rounded?: "none" / "sm" / "md" / "lg" / "xl" / "2xl" / "3xl" / "full" / boolean| rounded="lg"|
backgroundColor?: | |
onFocus?: string |onFocus="white"
onBlur?: string | onBlur="red" |
value?: string | value={value} //with react useState() |
onChange?: (e: React.ChangeEvent) => void | onChange={(e) => setValue(e.targe.value)} |
ref?: React.Ref | ref={ref} |
{...register('name')} // with react-hook-form
javascript
searchable //Добавить поиск
multiple //Возможность выбора несколько опций
clearable //Кнопка стирания
value={value} //use state
onChange={setValue} //use state
placeholder="Выберите фрукт" //placeholder
>
value="apple" //value
label="Яблоко" //label
disabled //disabled
>Яблоко
Банан
Апельсин
Виноград
Манго
`
$3
`javascript
name="select"
control={control}
render={({ field }) => (
{...field}
searchable
clearable
placeholder="Выберите фрукт"
>
Яблоко
Банан
Апельсин
Виноград
Манго
)}
/>
``