Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Work in progress, use at your own risk (alpha version)

formik-schema

Create forms simply using React.

import { Form } from 'formik-schema';

ReactDOM.render(
  <Form
    schema={{
      fields: [
        { name: "email", title: "Email", type: "email" },
        { name: "date", title: "Chose a date", type: "date" },
        { name: "accept", title: "Conditions", type: "checkbox", description: "I accept everything." }
      ]
    }}
    initialValues={{ accept: true }}
    onSubmit={(values) => {console.log(values)}}
  />,
  document.getElementById('root')
);

Built-in support for Bootstrap 4, multiple widgets available, highly customizable renderers.

Live demo

Installation

npm install formik-schema --save

Testing

This library comes with a few basic tests, using Jest:

npm test

This will actually build the bundle and run a few snapshot tests against it.

Custom widgets

You can register your own widgets (or override existing ones) simply:

import { registerWidget } from 'formik-schema';

registerWidget('textarea', (config, params) => (
  <MyTextarea name={config.name} onChange={params.handleChange} id={config.name} value={params.values[config.name]} rows={config.rows || 3} />
));

Custom form renderers

By default, forms are rendered as Bootstrap 4 vertical forms (see https://getbootstrap.com/docs/4.0/components/forms/#horizontal-form). You can also register your own renderer, e.g.:

import { makeWidget, registerRenderer } from 'formik-schema';

registerRenderer('table-form',
  (schema) => (params) => (
    <form onSubmit={params.handleSubmit}>
      <table>
      {schema.fields.map((field) => (
        <tr>
          <td>{field.title}</td>
          <td>{makeWidget(field, params)}</td>
        </tr>
      ))}
      </table>
      <button type="submit">OK</button>
    </form>
  )
);

Note

Under the hood, this library uses Formik to handle form state and submission. The variable params appearing in the code samples is documented in Formik (see https://github.com/jaredpalmer/formik#the-gist).

Releases

No releases published

Packages

No packages published