Folio: Dynamic Form Built With React & CSS Grid

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 :point_right: 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

property type description default component node/function custom render-component form onSubmit function submit function returns values in all cells (event, {...values}) () {}

Grid

property type description default component node/function custom render-component div col number number of columns in grid colWidth string fixed column width colMinWidth string column minimum width auto colMaxWidth string column maximum width 1fr row number number of rows in grid rowWidth string fixed row width rowMinWidth string row minimum width auto rowMaxWidth string row maximum width 1fr

GridItem

Used for implicit grid layout.

property type description default component node/function custom render-component div row number number of columns in grid toRow number column width col number column minimum width 0 toCol number column maximum width isCenter Boolean number of rows in grid false isHorizontal Boolean true

Cell

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

property type description default component node/function custom render-component div valueKey string key used to store value in values object type + id + groupname (if any) id string auto generated by function value string if type not button "" checked Boolean if type button false type Boolean text groupName string only for button toggle

CellItem

Used with list to wrap children.

property type description default component node/function custom render-component option

What's next?

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

License

This project is licensed under the MIT License