Using Libraries

JavaScript libraries

You can use any JavaScript library in your Mitosis components just like you would in any other framework. Here's an example of using lodash in a Mitosis component:

import { kebabCase } from 'lodash';

export default function MyComponent(props: { name: string }) {
  return <div>{kebabCase(props.name)}</div>;
}

Framework-specific libraries

Because of the cross-framework nature of Mitosis, you cannot use framework-specific libraries directly in Mitosis code.

For instance a React form library wouldn't make sense in the context of Mitosis, because Mitosis components are framework-agnostic, so how would it work with Vue or Svelte?

Focus on web fundamentals

The web platform has come a long way, and you may not need as many libraries as you think.

For example, for form handling, instead of using a library you can use the native form element and its built-in validation:

export default function MyComponent() {
  function handleSubmit(event: SubmitEvent) {
    event.preventDefault();

    const form = event.target as HTMLFormElement;
    if (!form.checkValidity()) {
      alert('Form is invalid');
      return;
    }
    const data = new FormData(form);
    const email = data.get('email');
    console.log(email);
  }

  return (
    <form onSubmit={(event) => handleSubmit(event)}>
      <input type="email" name="email" required />
      <button type="submit">Submit</button>
    </form>
  );
}

Use overrides (sparringly)

If you really need to use a framework-specific library, you can use overrides to provide different implementations for different frameworks.

In the overrides/ directory of a Mitosis project, you can create a file for each you want to override.

For example, if you have a file in src/components/foo.lite.tsx and you need a specific implementation for Angular, for instance to use a specific library or unique feature, you can create a file overrides/angular/src/components.foo.ts and provide the Angular-specific implementation.

See examples in the overrides directory of the builder.io SDK.