@cubicweb/react-form-utils

This library exposes react hooks and utilities to simplify writing React clients for CubicWeb applications.

As the name suggests, those utilities focus primarily on building forms. They build upon react-hook-form for form handling and yup for form validation.

Installation

@cubicweb/react-form-utils is available from NPM:

# With NPM
npm i @cubicweb/react-form-utils
# Or with Yarn
yarn add @cubicweb/react-form-utils

Usage

This library exports 4 main utilities:

useGetCubicWebEntity: Fetch an entity using its eid
useCubicWebForm: Wrapper around react-hook-form and yup to connect your forms with CubicWeb
EntityContextProvider: Provider and hooks to store the current entity schema and values
RelationDefinitionListContextProvider: Provider and hooks to store the current relation definitions

Documentation

You can find the full documentation with examples here.

Notes on relations

For JS objects representing entity values returned by useGetCubicWebEntity and useCubicWebForm, the relations are represented using the following format:

SUBJECT__RELATION-TYPE__OBJECT

So if you want to build a component handling a relation with several object types, you must be careful to edit all the possible keys in the JS object.

This is a limitation from @cubicweb/transaction-builder, while we are working on removing this behavior, it is still a work in progress which may take time.

On the other hand, when passing relations to ignore in the omittedFields parameter, you use the relation type with an optional reverse_ prefix in case the current entity is object of the relation.

You never mention the subject/object. This is the behavior we want to achieve for the JS objects in the helpers.

Contribute

All @cubicweb libraries are in the cubicwebjs monorepo. Please refer to the main README.