Next-generation react form fields built on top of jotai form primitives.

Overview

Atomic Form Fields for React

Declarative & headless form fields build on top of jotai & form-atoms.

yarn add jotai form-atoms @form-atoms/field

Motivation

form-atoms is the 'last-mile' of your app's form stack. It has layered, bottom-up architecture with clear separation of concerns. We provide you with stable pre-fabricated UI fields, while you still can go one level down and take the advantage of form primitives to develop anything you need.

To contrast it with formik or react-hook-form, our form state thanks to jotai lives outside of the react tree, so you never lose it when the component unmounts. Moreover, jotai's external state unlike redux-form has compact API with 'atom-local reducer' and automatic dependency tracking leading to unmatched rendering performance.

architecture

Key differences to other form libraries

No 'dotted keypath' access

Some libraries use path.to.field approach with field-dependent validation or when reading field at other place. We don't need such paths, as fields can be moved arround in regular JavaScript variables, as they are jotai atoms in reality.

Persistent form state by default

With others libraries you often lose form state when your component or page unmounts. Thats because the rendered form hook maintains the store. If the library provides a contextual API, you can opt-in into the persistence, so form state lives even when you unmount the form.

form-atoms on the other hand keeps the form state until you clear it, because it lives in jotai atoms. This way, you don't have to warn users about data loss if they navigate out of filled & unsubmitted form. Instead you can display 'continue where you left off' message when they return to the form.

What's in the box?

The form-atoms library provides atomic form primitives capable of tracking input value, touch state, validation status and more.

@form-atoms/field extends these primitives & packages them into hooks & headless components (think 'smart components'), which can be easily wired to UI (think dumb components) checkbox, select or array field.

What is a <Field />?

Most UI libraries provide styled primitive <Input> components, form <Label> and form <Control>. These must be integrated together with state & validation libraries, so when the input value is invalid, the error is propagated to the form control or the label is colored to red. The work to get this right is non-trivial and error prone.

@form-atoms/field provides you with integrated field components:

<Field> = <Control> + <Input> + <Label> + <HelpText> + <Error>

Fields

For well-known field types we export data type specific fieldAtom constructors. These come with pre-defined empty value of undefined and a specific zod validation schema. Similarly to zod schema fields, by default all the fieldAtoms are required.

Usage

import { numberField } from "@form-atoms/field";
import { fromAtom } from "form-atoms";
import { z } from "zod";
import { NumberField } from "@form-atoms/flowbite"; // or /chakra-ui


const height = numberField();
const age = numberField({ schema: z.number().min(18) }); // override default schema
const numOfKids = numberField({ optional: true }); // make field optional

const personForm = formAtom({ height, age, numOfKids });

export const Form = () => {
  const { submit } = useForm(personForm);

  return (
    <form onSubmit={submit(console.log)}>
      <NumberField field={height} label="Height (in cm)" />
      <NumberField field={age} label="Your age (min 18)" />
      <NumberField field={numOfKids} label="Number of kids" />
    </form>
  );
};
Field atom Default 'required' validation Use with
checkboxField(config?): FieldAtom<boolean> z.literal(true) CheckboxField
numberField(config?): FieldAtom<number | undefined> z.number() NumberField, SliderField
selectField(config?): FieldAtom<string | undefined> z.string() RadioField, SelectField
fileField(config?): FieldAtom<FileList | undefined> z.instanceof(FileList) FileField

Integrations

@form-atoms/field comes with <Fields /> pre-wired to popular UI libraries.

📦 Package Docs 🎨 Storybook 📃 Official Docs About
flowbite Flowbite Fields flowbite-react Bindigs to Tailwind component library Flowbite
chakra-ui 🚧 WIP chakra-ui Bindings to CSS-in-JS library Chakra UI
Comments
  • Fields can be initially empty/undefined

    Fields can be initially empty/undefined

    Currently the checkbox, radio or number fields are strict, so they always contain value of boolean, string or number respectively.

    Usually, when field is untouched:

    • none of radio buttons should be checked
    • number field should be empty like text field with empty string instead of displaying 0

    Use Cases

    • yes/no radio: when the form requires explicit user input, it must start with undefined radio value, so error message forces the user to pick one of options
    opened by MiroslavPetrik 1
  • Implementation: Chakra-UI - Slider

    Implementation: Chakra-UI - Slider

    closes #5

    🧐 About

    • Initial implementation of Chakra-UI RangeField
    • Code cleaning after package upgrades

    📝 Todo

    • [x] Improve typing
    • [x] Field atom value should be set to defaultValue when defined on RangeField
    opened by yomamaspaghetti 0
  • chakra-ui/Slider

    chakra-ui/Slider

    • similarly to flowbite/range https://github.com/MiroslavPetrik/react-last-field/commit/a47b936df16d6963bb737b8dc49f88c081848567
    • support https://chakra-ui.com/docs/components/slider
    good first issue 
    opened by MiroslavPetrik 0
  • Flowbite/Select support empty state with placeholder

    Flowbite/Select support empty state with placeholder

    Currently the select option starts initialized.

    • provide placeholder option
    • possibly include it in useSelectOptions
      • chakra-ui supports select placeholder out of the box
    opened by MiroslavPetrik 0
  • Strip untouched values before submit

    Strip untouched values before submit

    When field is optional, its empty value is present in submit values. This might be undesirable for some cases, when strict values are required.

    Possibly when field is untouched, it can be stripped from the submit values.

    question 
    opened by MiroslavPetrik 0
Owner
null
Builtin React Dream components for web primitives

ReactDream builtin components for Web (HTML + SVG) This library contains a full set of ReactDream builtin components for Web, both SVG components and

Fernando Via Canel 1 Dec 26, 2018
we are going to make Next.js API requests, return data from FaunaDB and ImgBB Chakra UI in Next.js, useInfiniteQuery, React-hook-form and much more...

we are going to make Next.js API requests, return data from FaunaDB and ImgBB Chakra UI in Next.js, useInfiniteQuery, React-hook-form and much more...

Gleydson Rodrigues 2 Sep 14, 2022
A small reddit client for browsing the top posts of r/all - built with typescript and react.

snoof A small reddit client for browsing the top posts of r/all - built with typescript and react. Desktop Mobile Features responsive infinite loading

Phoebe Gao 1 Nov 14, 2021
Microsite - a fast, opinionated static-site generator (SSG) built on top of Snowpack

Read the docs | See the live examples | Join our Discord microsite is a fast, opinionated static-site generator (SSG) built on top of Snowpack. It out

Nate Moore 851 Dec 30, 2022
A declarative state container built on top of xState

xState-store is a library built on top of xstate, that allows you to access your machines/services through your React application and simplify sharing the same instance/actor between your different components.

Axel Mohamed SADAT 16 Dec 19, 2022
An example implementation of a top-down 2d game made with React and react-three-fiber

react-three-fiber Game Demo This repo shows an example implementation of a top-down 2d game made with React and react-three-fiber. I used the core fun

Felix Laukel 558 Jan 9, 2023
Peer-Learning-Platform - A platform designed specifically as an additional layer on top of Google Classroom for students to gain the best out of online evaluations

A platform designed specifically as an additional layer on top of Google Classroom for students to gain the best out of online evaluations. Facilitates students to look at solutions from the perspective of their peers. A platform that goes beyond learning and instils ethics and moral integrity within the community.

Rahul Dhakar 3 Jun 12, 2022
Crypto-Expence-Tracker: keep an eye on the top trends on the market, crypto prices, and all their details

The crypto is a capstone built with React/redux, SASS, and the coinbase API. It helps them to keep an eye on the top trends on the market, crypto prices, and all their details.

Kandy Peter Kamuntu 8 Dec 3, 2022
Top Trump Deck Builder Project to transform some figma image in a game maker website

Top Trump Deck Builder Project This project was inspired on the first project I did while studying the module of Front end Web Development in the Tryb

Igor Marinho Argollo 1 Aug 2, 2022
This is a multiplayer tic tac toe game built with Next.js and React and styled with Sass, used Recoil for state management also with a built-in chat system.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Temmy 4 Nov 17, 2022
Aplicação desenvolvida com Next-js, Strepi, FaunaDB, Next-Auth e Prismic no curso de React-Js da RocketSeat

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Christopher Lee 0 Dec 24, 2021
Full-stack Uber recreation built with React, Next.js, styled-components, Tailwind, and Mapbox.

Uber Clone Full-stack Uber recreation built with React, Next.js, styled-components, Tailwind, and Mapbox. Getting Started git clone [email protected]:Dev

Devlin Rocha 4 Dec 24, 2022
spotify clone built with react, next, tailwind

Next.js + Tailwind CSS Example This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind

jergra@yahoo.com 2 Dec 28, 2021
Finance-Tracker - A basic finance-tracker application built using Next.js, React Hooks and Context API

Next.js + Tailwind CSS Example This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind

Osemwengie Benjamin 1 Jan 2, 2022
Collaborative shopping basket built with Liveblocks in React/Next.js

Live Basket This repo shows how to build a live shopping basket with Liveblocks and Next.js. Try it out This shopping basket isn't only shared between

Chris 13 Oct 26, 2022
A chat application built with React, Next.js, and the xmtp-js client library

React Chat Example This example chat application demonstrates the core concepts and capabilities of the XMTP Client SDK. It is built with React, Next.

XMTP 69 Dec 21, 2022
An open-source storefront in React.js with Next.js. Built for Headless Commerce, using a modern stack with TypeScript, GraphQL, Apollo, and Tailwind CSS.

Next.js Storefront Next.js Storefront: Your open-source frontend starter pack for building performant e-commerce experiences with Saleor. Saleor Check

Saleor Commerce 543 Jan 2, 2023
An example Svix integration built in Next.js (TypeScript and React)

Svix - Webhooks as a service Website | Documentation | Community Slack Example Svix Application This is an example Next.js application showing how to

Svix 4 Feb 13, 2023
Exemplary real world application built with Next.js + SWR

Next.js + SWR codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API. Demo RealWorld

Minho Han 663 Dec 30, 2022