Dynamic Form Built With React & CSS Grid layout

Folio has two major bases Cells for data and Grid for layout. With these components, making a form should be easier than ever. See full examples of folio 👉 https://jalal246.github.io/folio/.

Run locally:

• git clone https://github.com/jalal246/folio.git
• npm install
• npm run storybook
• Go to http://localhost:6006/

Using npm:

npm install --save folio-forms

folio depends on react and prop-types. Please make sure you have those installed as well.

unpkg

https://unpkg.com/folio-forms/dist/

const myForm = ({ mySubmitFunc }) => (
  <Folio>
    <Form onSubmit={mySubmitFunc}>
      <Grid>
        <GridItem row={1} col={1}>
          <Cell valueKey="myFullName" type="text" />
        </GridItem>
        <GridItem row={2} col={1}>
          <Cell valueKey="myEmail" type="email" />
        </GridItem>
        <button type="submit">submit</button>
      </Grid>
    </Form>
  </Folio>
);

// mySubmitFunc will return: (event, {myFullName: "" myEmail: ""})

import Folio, { Form, Grid, Cell, CellItem, GridItem } from "folio-forms";

All components accept custom props + children which is required in all except Cell

Used for implicit grid layout.

Essential to register values in the store, return values it when submit.

Used with list to wrap children.

Enable end-user to create, design and shape forms.

This project is licensed under the MIT License