https://github.com/tchaumeny/formik-schema

Just build forms.
https://github.com/tchaumeny/formik-schema

bootstrap bootstrap4 form javascript react

Last synced: about 1 month ago
JSON representation

Just build forms.

• Host: GitHub
• URL: https://github.com/tchaumeny/formik-schema
• Owner: tchaumeny
• Created: 2017-10-12T20:37:19.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-02-01T19:25:11.000Z (almost 2 years ago)
• Last Synced: 2024-10-01T18:08:27.100Z (about 2 months ago)
• Topics: bootstrap, bootstrap4, form, javascript, react
• Language: JavaScript
• Homepage:
• Size: 104 KB
• Stars: 33
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#### ⚠ This project has been abandoned, use at your own risk ⚠

# formik-schema

Create forms simply using [React](https://reactjs.org/).

```js

import { Form } from 'formik-schema';

ReactDOM.render(

   {console.log(values)}}

  />,

  document.getElementById('root')

);

```

Built-in support for [Bootstrap 4](https://getbootstrap.com/), multiple widgets available, highly customizable renderers.

### ➡ [Live demo](https://codesandbox.io/s/github/tchaumeny/formik-schema/tree/master/demo)

## Installation

    npm install formik-schema --save

## Testing

This library comes with a few basic tests, using [Jest](http://facebook.github.io/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:

```js

import { registerWidget } from 'formik-schema';

registerWidget('textarea', (config, params) => (

  

));

```

## Custom form renderers

By default, forms are rendered as Bootstrap 4 vertical forms (see ). You can also register your own renderer, e.g.:

```js

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

registerRenderer('table-form',

  (schema) => (params) => (

    

      

      {schema.fields.map((field) => (

        

          {field.title}

          {makeWidget(field, params)}

        

      ))}

      

      OK

    

  )

);

```

## Note

Under the hood, this library uses [Formik](https://github.com/jaredpalmer/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).