Usage in React

Using Web Components in React is not always easy, especially when it comes to handling events.

To facilitate things, informel exports React components wrappers for its Web Components:

• <InformEl />
• <InformField />

They can be imported like so:

import { InformEl, InformField } from 'informel/react';

Imports

The imports above don't replace import 'informel';, that still needs to be done at the root of your app (in App.js for example)

The API and behavior are the same as using the Web Components (<inform-el/> and <inform-field />) directly. Events and access to validityHandler, submitTransform and events are facilitated:

<InformEl
    onInformInput={handleInput}
    onInformSubmit={handleSubmit}
    validationHandler={handleValidation}
    zodSchema={ZodSchema}
    onInformelReady={() => {
        console.log('ready!!!!');
    }}
    submitTransform={handleSubmitTransform}
    onRequestStart={(e) => console.log('request start', e.detail)}
    onRequestSuccess={(e) => console.log('request success', e.detail)}
    onRequestError={(e) => console.log('request error', e.detail)}
>
    ...
</InformEl>

All the events described in the API are available as prop using their camelCase version, prefixed by "on":

• inform-input becomes onInformInput
• informel-ready becomes onInformelReady
• request-start becomes onRequestStart etc...

All the attributes have a camelCase equivalent (see in the example below, too-short becomes tooShort):

<InformField tooShort="At least 8 characters!">
    <input type="password" name="password" required minLength={8} />
</InformField>

Typescript definitions can be found here.

Methods (setValues and reset) can be called using a ref:

const ref = React.createRef();

and then:

<InformEl ref={ref}>
    <form>
        <label>
            Email
            <InformField>
                <input type="email" name="email" required />
            </InformField>
        </label>
    </form>

    <button onClick={() => ref.current.setValues({ email: 'bonjour' })}>Bonjour</button>
</InformEl>

Typescript

The library is fully typed. Type definitions are exported from here.

Setting initial values

An extra prop initialValues is available in React. It allows to set the form initial values. The first time this prop is assigned an object, the form is reset to the values inside that object (matched by name attribute on each field).

Example:

<InformEl initialValues={{ email: 'test@test.com' }}>
    <form>
        <label>
            Email
            <InformField>
                <input type="email" name="email" required />
            </InformField>
        </label>
    </form>
</InformEl>

The example below fetches data and uses the result as form default values:

const [formInitialValues, setFormInitialValues] = useState();

React.useEffect(()=>{
    const init = async ()=>{
        // ...fetch some data

        setFormInitialValues(receivedData);
    }
    init();
}, [])

<InformEl initialValues={formInitialValues}>
    <form>
        <label>
            Email
            <InformField>
                <input type="email" name="email" required />
            </InformField>
        </label>
    </form>
</InformEl>

Only the first value is used

After the initial values are set once, any change to the initialValues prop will be ignored.

Usage in Next.js

Next.js renders on the server side (SSR) and that is not compatible with Web Components. A workaround is to call import() in a useEffect() in order to dynamically add the Web Components definition to the page, on the front end:

React.useEffect(() => {
    import('informel');
}, []);

Source: https://dev.to/swyx/how-to-use-web-components-with-next-js-and-typescript-4gg1

Examples

Here is a simple example:

Here is another example showing the usage of the action and method attributes, with optimistic updates:

In the example above there are 3 informel forms:

• One for adding a task at the top
• One wrapping the done checkbox and using submit-on-change. It sends a PUT request to set the task to done.
• One wrapping the delete button (the delete button is the submit button). It sends a DELETE request.