onedash-react-input-form
v2.2.31
Published
OneDash. React form and input components
Downloads
324
Readme
React.js input form and components
This guide will help you render form and input components with React.js. If you're not familiar with setting up a new React web project, please refer to the React documentation.
Install
In order to install the components run the following:
npm install onedash-react-input-form
Usage
All the described components can be imported from "onedash-react-input-form".
Example:
import React, Component from "react";
import {Form, Input} from "onedash-react-input-form";
class ComponentWithForm extends Component {
render() {
return (
<Form>
<Input
name="first-name"
placeholder="Here comes your first name"
label="First name (Label)"
required />
</Form>
)
}
}
Styling
Most components come without any style. You can adjust it yourself by CSS. If you like the style in this documentation, you can use our stylesheet from here.
Name
Each component get's a name which will is necessary for the form component. The name defines a property name / path where to store the input value.
Example:
<Form onChange={this.niceFunction}>
<Input name="firstName" placeholder="Here comes your first name" label="First name (Label)" required />
<Input name="lastName" placeholder="Here comes your last name" label="Last name (Label)" required />
<Input name="arr[0].test" placeholder="Testinput" label="Testinput (Label)" required />
</Form>
When you now type in some values in firstname or lastname the onChange event is fired. It contains all the current values of the form in the following style:
{
"firstName": "John",
"lastName": "Doe",
"arr": [
{
"test": "Special testing input"
}
]
}