Usage in Remix

Remix uses Server Side Rendering (SSR) to render the page on the server and then hydrates the page on the client side. informel relies on Web Components, so the library needs to be imported & initialized on the client side only. To do so, add the following to your App component located inside the root file of your project.

useEffect(() => {
    require('informel');
  }, []);

Full example:

export default function App() {
  // Add this useEffect
  useEffect(() => {
    require('informel');
  }, []);

  // Rest of the page, no changes below
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

Then, in order to use informel with Remix's Form component, you'll need to add the defaultSubmit prop to your <InformEl> component. That'll remove the usage of e.preventDefault() by informel when submitting, not getting in the way of the <Form/> component.

In other words, just wrapt the <Form/> component with <InformEl defaultSubmit> and you're good to go!

Here is an example:

Limitations

When using <InformEl defaultSubmit> with the <Form/>, the resetOnSubmit prop is not supported: It would reset the form before the <Form/> component has a chance to do handle submission and it would receive empty values.

If you need to use that feature, you can use a regular <form/> element and trigger the submission manually via useFetcher.

Example:

export default function Index() {
  const fetcher = useFetcher();

  const handleSubmit = ({ detail: { values } }: CustomEvent<{ values: { login: string, password: string; }; }>) => {
    fetcher.submit(values, { method: 'post' });
  };

  return (
    <InformEl resetOnSubmit onInformSubmit={handleSubmit}> {/* no defaultSubmit prop anymore */}
      <form> {/* use a regular form here */}
        <InformField>
          <input
            type="email"
            name="login"
            placeholder="login"
            aria-label="login"
            required
          />
        </InformField>
        <InformField>
          <input
            type="password"
            name="password"
            placeholder="password"
            aria-label="password"
            required
          />
        </InformField>
        <button type="submit">Submit</button>
      </form>
    </InformEl>
  );
}

Usage in Remix

Limitations​

Limitations