Just build forms.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
tests
.babelrc
.gitignore
README.md
package-lock.json
package.json Release 1.0.5 Sep 25, 2018
webpack.config.js

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).