📋 @folo/values

A from store returns input values with zero config

Installation

npm install @folo/values

• ☑️ A simple, lightweight package, comes with two components connected to global JavaScript store. That's it. No complexity, no unnecessary code.

• ☑️ Instead of implementing your own store, @folo/values can do it for you with a store that holds inputs and knows exactly when to trigger connected components to re-render.

• ☑️ Doesn't require using Redux/Mobx/Context. While these technologies are amazing it always comes with a cost. That's why every update that happens in Folo happens locally. The store is just the Maestro.

• ☑️ You can add multiple forms connect them to the store or create branches yourself. It's all about StoreID my friends.

• ☑️ Friendly code. What you do for a form written in JS, Can do it here. No external API. No external functionality. onSubmit, onChange are still here and not going anywhere.

• ☑️ It's well tested code, with nearly 100% of code coverage 🥳

Usage

import { Form, Field } from "@folo/values";

const MyComponent = ({ onSubmit }) => (
  <Form onSubmit={onSubmit} storeID="example1">
    <label>
      username:
      <Field valueKey="myName" type="text" storeID="example1" />
    </label>
    <label>
      password:
      <Field valueKey="myPass" type="password" storeID="example1" />
    </label>
    <label>
      choose:
      <Field valueKey="alphabet" type="select" storeID="example1">
        <option valueKey="a">A</option>
        <option valueKey="b">B</option>
        <option valueKey="c">C</option>
      </Field>
    </label>
    <button type="submit">submit</button>
  </Form>
);
// submit function will return: (event, {myName: "" myPass: "", alphabet:""})

Available Components

import { Form, Field } from "@folo/values";

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

Form

property	type	description	default
component	HTMLElement/string	custom render-component	form
onSubmit	function	submit function returns values in all cells (event, {...values})	() {}
storeID	string	unique id shared with form and fields	unrecognized

Field

Essential to register values in the store, returns its value when submit. Accepts all events handlers.

property	type	description	default
component	HTMLElement/string	custom render-component	div
storeID	string	unique id shared with form and fields	unrecognized
valueKey	string	key used to store value in values object	id or timestamp
value	string	Initial value if type is not a button	""
checked	Boolean	Initial value if type is a button	false
type	string	Input type	text
groupName	string	only for button toggle group	null

Examples

You can clone all the examples used in these packages here. With an example for Simple Form Or a Custom Form built with custom components. It includes All Available fields and examples that show you how to handle toggle button groups.

Test

yarn test folo-values

Contribution 😇

If you have ideas or issues don't hesitate. You are always welcome.

License

This project is licensed under the MIT License