react-forms-materialize-css 📋
A simple dynamic react form component which uses json to render a form with material css styling.
Install
npm install --save react-forms-materialize-css
Usage
Using react-forms-materialize-css is easy (not baised at all 😏)!
Prequesites ✋
- You obviously need to make sure that you're using react ^15.0.0 or ^16.0.0.
- You will need to install materialize-css and load the material icons resource in the head element of your index.html file. You will also have to install the materialize-css npm module
Step 1 (Defining our form JSON) 🏃
The react-forms-materialize-css ingests the form JSON and dynamically generates fields and their state variables in the form component. Currently you must find a way to serve this JSON file and this must be served under a /forms route. If you are using create-react-app this is fairly easy just add the json file in a forms folder under the public folder i.e. public > forms > [form-name].json .
Alright! Let's create a simple sign-up form asking for the first name, last name, email, password and an about you free text field. We will also add a submit button so that we can submit this form ( why else would you add a submit button ). We will see how we can add custom handlers in Step #2
Now we add this form JSON to our forms folder or where this file can be served under the route /forms
Step 2 (Adding our component to our app) 🏃
Now we just need to add our form component
import React from "react";import "materialize-css/dist/css/materialize.min.css";import Form from "react-forms-materialize-css" { // we're going to define a submit handler here // we can do anything in this function // for this example we will create an object and log it to console let { let data = // the this here will point to the Form component for let item in thisstate /* values for the fields will have "Value" appended to their state variable */ if item !== -1 dataitem0 = thisstateitem console console event } /* we're going to also define a function handle onChange events. Each individual field can be assigned a seperate handler or none at all */ let { console } return <Form ="signup.json" = = => </Form> } ;
Step 3 (Start our application) 🏁
License
MIT © Moro-Code