Dynamic Form Built With React & CSS Grid
Switch branches/tags
Nothing to show
Clone or download
Latest commit 147d94c Oct 24, 2018
Permalink
Failed to load latest commit information.
.storybook init Oct 22, 2018
src init Oct 22, 2018
stories eslint ignore children Oct 22, 2018
test update to babel 7 Oct 18, 2018
.babelrc rem productin env Oct 24, 2018
.editorconfig fixing linebreaks on windows Oct 11, 2018
.eslintignore init May 14, 2018
.eslintrc add babel-eslint Oct 24, 2018
.gitattributes trying to solve LF to CRLF issue Oct 10, 2018
.gitignore init Oct 22, 2018
.nycrc update to babel 7 Oct 18, 2018
.prettierignore add prettierignore Aug 1, 2018
.travis.yml add cover Oct 24, 2018
CHANGELOG.md version 0.1.1 Oct 24, 2018
LICENSE.md init Oct 18, 2018
README.md fix badgee links Oct 24, 2018
coverage.lcov version 0.1.1 Oct 24, 2018
folio-demo.gif init Oct 22, 2018
package.json version 0.1.1 Oct 24, 2018
webpack.config.js init Oct 18, 2018

README.md

Folio

Dynamic Form Built With React & CSS Grid layout


live example

Build Status Codecov npm npm GitHub

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:

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