React

by Uday Hiwarale

React

const formConfig = {
	fields: {
    username: {
      required: true,
      minLength: 5,
      maxLength: 15,
      match: /^[a-z]+/mig,
      validator: (value) => true
    },
    role: {
      required: true
    }
  },
  style: {
  	erros: false,
    errorPos: 'bottom|top|left|tooltip',
  },
  value: {
  
  }
};


<Form value={ this.state.data } onSubmit={ this.onFormSubmit } onError={ this.handleError } config={ formConfig }>
  <Field name="username">
    <Label>Your username</Label>
    <Input type="text|radio|checkbox"/>
  </Field>
  
  <Field name="role">
    <Label>Your Role</Label>
    <Select>
      <Option></Option>
    </Select>
    <p class="error">{ err }</p>
  </Field>
  
  <Field name="bio">
    <Label>Your bio</Label>
    <Textarea></Textarea>
  </Field>
  
  <Field name="choices">
    <Label>Your choices</Label>
    <Control>
      ...
    </Control>
  </Field>
  
  <Submit className="some-class">Name</Submit>
</Form>