Ready Components

Ready components to create your React App!

Usage/Examples RdyInput

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" |
| bordered | onFocus?: string, onBlur?: string | onFocus="red" |
| | | onBlur="white" |
| rounded | rounded?: "none" / "sm" / "md" / "lg" / "xl" / "2xl" / "3xl" / "full" / boolean| rounded="lg"|
| backgroundColor | backgroundColor?: | |
| | onFocus?: string |onFocus="white"
| | onBlur?: string | onBlur="red" |
| value | value?: string | value={value} //with react useState() |
| onChange | onChange?: (e: React.ChangeEvent) => void | onChange={(e) => setValue(e.targe.value)} |
| ref | ref?: React.Ref | ref={ref} |
| ...props | | {...register('name')} // with react-hook-form

Usage/Examples RdySelect

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="Выберите фрукт"

            >

                Яблоко

                Банан

                Апельсин

                Виноград

                Манго

            

        )}

    />

Ready Components