@flowerforce/flower-react-form

Flower React Form

Flower React Form is a form management library for React. Built on top of Flower Core, it can be easily integrated with FlowerReact or used independently while preserving Flower’s key features, such as render optimization, automatic data handling, and validation rule management.

For more info flowerjs.it/

Features

• Data handling: Read and write data to the global Redux store.
• Form validation: Built-in functionalities to validate individual inputs and the entire form.

Installation

Flower React Form can be installed via npm or yarn for use in any JavaScript project.

Using npm

• Ensure you have Node.js and npm installed on your system.
• Run the following command to install the library:

#NPM
npm install @flowerforce/flower-react-form

Using yarn

• Ensure you have yarn installed on your system.
• Run the following command to install the library:

#YARN
yarn add @flowerforce/flower-react-form

Configuration

The FormProvider component wraps the entire application, providing a global context for managing the application flow.

import React from 'react'
import { FormProvider } from '@flowerforce/flower-react-form'

function Root() {
  return (
    <FormProvider>
      <App />
    </FormProvider>
  )
}

FormProvider accepts some properties such as reducers and configureStoreOptions in order to inject custom reducers into redux instance provided by FlowerProvider component. N.B.: actions and selectors from your custom reducers must use useSelector and useDispatch provided by flower-react-form

import React from 'react'
import { customReducer, customReducer2 } from 'my-custom-reducers'
import { FormProvider } from '@flowerforce/flower-react-form'

const reducers = {
  customReducer: customReducer.reducer,
  customReducer2: customReducer2.reducer
}

function Root() {
  return (
    <FormProvider reducers={reducers}>
      <App />
    </FormProvider>
  )
}

How to use

Simple Example

The FlowerForm component defines a form with a specific name, which serves as a unique identifier for the form. It is the main component for defining forms, accepting a required "name" property and an initialState field for prepopulating values.

import React from 'react'
import { FlowerForm, FlowerField } from '@flowerforce/flower-react-form'

export const Page = () => {
    <FlowerForm
      name="form-test"
      initialState={{ name: 'andrea', surname: 'rossi' }}
    >
      <FlowerField
        id="name"
        validate={[
          {
            message: 'is equal',
            rules: { $and: [{ name: { $eq: 'andrea' } }] }
          }
        ]}
      >
        your input component...
      </FlowerField>
      <FlowerField
        id="surname"
        validate={[
          {
            message: 'is equal',
            rules: { $and: [{ surname: { $eq: 'rossi' } }] }
          }
        ]}
      >
        your input component...
      </FlowerField>
    </FlowerForm>
  
}

Edit on [codesandbox/](add link)

Hook - useFlowerForm

Here, we are using the useFlower hook to obtain some essential functions for navigation and handling of the application flow.

useFlowerForm as child ...

import React from 'react'
import { FlowerForm, FlowerField } from '@flowerforce/flower-react-form'

const ViewFormState = () => {
  const { isValid, getData, setData, ...rest } = useFlowerForm()
  return <span>{isValid}</span>
}

export const Page = () => {
    <FlowerForm
      name="form-test"
      initialState={{ name: 'andrea', surname: 'rossi' }}
    >
      <FlowerField
        id="name"
        validate={[
          {
            message: 'is equal',
            rules: { $and: [{ name: { $eq: 'andrea' } }] }
          }
        ]}
      >
        your input component...
      </FlowerField>
      <FlowerField
        id="surname"
        validate={[
          {
            message: 'is equal',
            rules: { $and: [{ surname: { $eq: 'rossi' } }] }
          }
        ]}
      >
        your input component...
      </FlowerField>
      <ViewFormState />
    </FlowerForm>
  
}

Edit on [codesandbox/](add link)

External use of useFlowerForm

import React from 'react'
import { FlowerForm, FlowerField } from '@flowerforce/flower-react-form'

export const Page = () => {
  const { isValid, getData, setData, ...rest } = useFlowerForm('form-test')

    return  (
    <FlowerForm
      name="form-test"
      initialState={{ name: 'andrea', surname: 'rossi' }}
    >
      <FlowerField
        id="name"
        validate={[
          {
            message: 'is equal',
            rules: { $and: [{ name: { $eq: 'andrea' } }] }
          }
        ]}
      >
        your input component...
      </FlowerField>
      <FlowerField
        id="surname"
        validate={[
          {
            message: 'is equal',
            rules: { $and: [{ surname: { $eq: 'rossi' } }] }
          }
        ]}
      >
        your input component...
      </FlowerField>
      <ViewFormState />
    </FlowerForm>
    )
  
}

Edit on [codesandbox/](add link)

Documentation

The Flower React docs are published at flowerjs.it/