Skip to content

tchaumeny/formik-schema

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

This project has been abandoned, use at your own risk

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