Have ideas to improve npm?Join in the discussion! »

This package has been deprecated

Author message:

This package is deprecated and moved to https://github.com/jalal246/folo

folio-forms

0.1.1 • Public • Published

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

Install

npm i folio-forms

DownloadsWeekly Downloads

6

Version

0.1.1

License

MIT

Unpacked Size

409 kB

Total Files

7

Last publish

Collaborators

  • avatar