html input for reactjs
npm install @meksiabdou/react-input
!bundlephobia
!npm

!license
> html input for reactjs
``cmd`
yarn add @meksiabdou/react-input
`cmd`
npm install @meksiabdou/react-input
| Name | Required | Type | Default Value |
|:------:|:------:|:------:|:---------------:|
| ref | false | any | undefined |
| name | true | String | none |
| placeholder | false | String | undefined |
| label | false | String | undefined |
| type | false | String | undefined |
| value | false | String | undefined |
| defaultValue | false | String | undefined |
| error | false | String | undefined |
| className | false | String | undefined |
| dir | false | rtl , ltr , auto | undefined |
| as | false | 'input' , 'textarea' ,'select' ,'dropdown' ,'currencyInput' ,'creatableSelect', 'react-select' | input |
| icon | false | ReactNode | undefined |
| options | false | Array | undefined |
| style | false | CSSProperties | undefined |
| inputGroupStyle | false | function | undefined |
| reactSelectStyle | false | StylesConfig | undefined |
| htmlFor | false | String | undefined |
| precision | false | number | undefined |
| prefix | false | String | undefined |
| suffix | false | String | undefined |
| allowDecimals | false | boolean | undefined |
| allowNegativeValue | false | boolean | undefined |
| decimalsLimit | false | number | undefined |
| decimalScale | false | number | undefined |
| fixedDecimalLength | false | number | undefined |
| groupSeparator | false | String | undefined |
| intlConfig | false | IntlConfig (https://mzl.la/3xEpJoQ) | undefined |
| disableAbbreviations | false | boolean | undefined |
| disableGroupSeparators | false | boolean | undefined |
| isClearable | false | boolean | undefined |
| isMulti | false | boolean | undefined |
| disabled | false | boolean | undefined |
| onChange | false | function | undefined |
| onFocus | false | function | undefined |
`tsx
import * as React from 'react';
import { useState, useEffect, useRef } from 'react';
import ReactInput, { InputProps } from '../.';
const App = () => {
const [data, setData] = useState
password: undefined,
email: undefined,
role: undefined,
country: undefined,
colors: undefined,
confirm: undefined,
});
const [direction, setDirection] = useState('ltr');
const stringToBoolean = (str: string) => {
if (['true', 'false'].includes(str?.toString())) {
return str.toString() === 'true';
}
return undefined;
};
const onChange = ({ target }: any) => {
const { name, value } = target;
setData((preData: any) => {
return {
...preData,
[name]: value,
};
});
};
const onClick = (e: any) => {
console.log(e);
};
const [inputs, setInput] = useState
const inputsRef = useRef
useEffect(() => {
console.log(data);
}, [data]);
useEffect(() => {
setTimeout(() => {
setInput([
{
name: 'email',
type: 'email',
label:
return (
Email : {data.email || ''}
Amount : {data.amount || ''}
Password : {data.password || ''}
Country : {data.country || ''}
Role : {data.role || ''}
Colors :{' '}
{(data.colors as Array
MIT © meksiabdou