Folio

Dynamic Form Built With React & CSS Grid layout

Overview

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

Installation

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/

Usage

Example

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: ""})

Components

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

Components Props

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

Form

Grid

GridItem

Used for implicit grid layout.

Cell

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

CellItem

Used with list to wrap children.

What's next?

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

License

This project is licensed under the MIT License