1.3.1 • Published 2 years ago
Input field's for React.js and Next.js ---
Installation:-
Using npm :-
$ npm install --save formfieldsui
Using yarn :-
$ yarn add formfieldsui
Import and example:-
import { EmailFieldInput, TextFieldInput, TextAreaFieldInput, PasswordFieldInput, ButtonFieldInput} from "formfieldsui";
<EmailFieldInput
label='EmailLabel'
placeholder='placeholder'
onChange={(e) => e.target.value}
/>
<TextFieldInput
label='textLabel'
placeholder='placeholder'
onChange={(e) => e.target.value}
/>
<TextAreaFieldInput
label='textAreaLabel'
placeholder='placeholder'
onChange={(e) => e.target.value}
/>
<PasswordFieldInput
label='textLabel'
placeholder='placeholder'
onChange={(e) => e.target.value}
/>
<ButtonFieldInput
onClick={() => alert('alert message')}
buttonText="Click"
/>
Props:-
| Name | Type | Default | Description |
|---|
| type | string | text-TextFieldInput, email-EmailFieldInput, password-PasswordFieldInput | It's customizable and it's only applicable for TextFieldInput |
| Label | string | | The label content. |
| helperText | string | | The helper text content for message's. |
| error | bool | false | If true, the label is displayed in an error state. |
| id | string | | The id of the input element. Use this prop to make label and helperText accessible for screen readers. |
| value | any | | The value of the input element, required for a controlled component. |
| name | string | | Name attribute of the input element. |
| placeholder | string | | The placeholder content. |
| onChange | func | | onChange={(e)= e.target.value} |
| rows | number | | The rows attribute specifies the visible height of a text area, in lines. (it's only aplicable for TextAreaFieldInput) |
| cols | number | | The cols attribute specifies the visible width of a text area. (it's only aplicable for TextAreaFieldInput) |
| disabled | bool | false | If true, the input field is disabled |
| showPassword | bool | | It's only applicable for PasswordFieldInput, this state change show and hide icon & paswword filed type to text>password and vice versa |
| showImg | string | | It is used to pass show password eye icon image path |
| hideImg | string | | It is used to pass hide password eye icon image path |
| changeIconFunc | func | | handle showPassword state |
| autoFocus | string | | Specifies that a button should automatically get focus when the page loads |
| buttonText | string | | button name |
ClassName for Css:-
lableClass = for label,
rootClass = for input fields,
helperTextClass = for notification "error message"
variant :-
| Variant name for Input fields | |
|---|
| Outlined | |
| Standard | |
| Filled | |
Ex:-
import { Standard, Filled, Outlined } from "formfieldsui";
<TextFieldInput variant={Outlined} />
<EmailFieldInput variant={Standard} />
<PasswordFieldInput variant={Filled} />
| Variant name for Button | |
|---|
| BtnOutlined | |
| BtnStandard | |
| BtnFilled | |
Ex:-
import { BtnOutlined } from "formfieldsui";
<ButtonFieldInput variant={BtnOutlined}/>