@meksiabdou/react-input

!JavaScript 
!React 
!NextJs 

!bundlephobia
!npm
!license

> html input for reactjs

Install

``cmd
yarn add @meksiabdou/react-input
`

`cmd
npm install @meksiabdou/react-input
`

$3

| 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 |

Usage

`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:

Email