easy-form-manager

Simple, Fast, MobX-State-Tree powered form manager Live Demo

Contents

• Installation
• Getting Started
• Examples
• Api overview

Installation

• NPM: npm install easy-form-manager --save
• Yarn: yarn add easy-form-manager

Getting started

<Form> is a wrapper component automatically inject value and listener to each field contained with fieldid atributte added.

prop	description	required
onSubmit	Callback return field values required a submit type button.	optional
validation	Callback function expect return true or false.	optional
fieldid	Atributte required must be added to each field.	required

import { Form } from "easy-form-manager"
//...

render(){
  return(
    <Form 
      onSubmit={(values)=> { /* do something with the values */ }} 
      validation={(values) => /* validate values and return true or false */}
    > 
      <label>This is a field</label>
      <input fieldid="field-id" />
    </Form>
  )
}

<ConditionalRender> is a wrapper component to hide or render the children

prop	description	required
condition	Callback return field values and expect true or false	optional

import { Form } from "easy-form-manager"
//...

render(){
  return(
    <Form> 
      <ConditionalRender condition={(values)=> /* add some condition as values.fieldid === "something" */ ? true : false}>
        <MoreFields />
        <YepEvenMoreThanOne />
      </ConditionalRender>
    </Form>
  )
}

Examples

To run the examples:

1. clone this repository
2. navigate to the demo folder (e.g. /demo)
3. run yarn install and yarn start

or check the Live Demo page

Api overview

signature
values()	Function, return field values
getFieldValue(fieldid) => fieldid.value)	Return an specific field value
setValue(fieldid, value)	Set a value to an specific field