React

Auto-detection and explicitly setting the framework

Agrippa’s auto-detection determines which framework is used in your environment through your package.json’s dependencies. Particularly, React is detected through the react package.
However, some setups have more than one framework as a dependency or none at all, which can lead Agrippa to a different result than the desired one.

If this is the case for your setup, you can explicitly set Agrippa’s options.framework to react in agrippa.config.mjs:

// @ts-check
// note the new import
import { defineConfig, Framework } from "agrippa";

export default defineConfig({
  options: {
    framework: Framework.REACT

    // ...
  },
  // ...
});

Framework.REACT is equivalent to "react", but using the built-in Framework enum is clearer and less prone to errors.

importing React

React’s new JSX transform allows writing JSX without importing React at the top of each file (among other features). For most new projects, this should already be in place, but older environments or custom setups might still require it.

In accordance with this, Agrippa does not import React by default, but this can easily be configured through options.reactOptions.importReact field in agrippa.config.mjs, like so:

// @ts-check
import { defineConfig } from "agrippa";

export default defineConfig({
  options: {
    // ...

    reactOptions: {
      importReact: true
    },
  },
  // ...
});

Prop Types

Agrippa supports appending a PropTypes block to the generated component declaration. This can easily be configured using PropTypesPlugin:

// @ts-check
import { defineConfig, Styling, PostCommandPlugin } from "agrippa";

export default defineConfig({
  // ...

  plugins: [
    // ...

    new PropTypesPlugin()
  ],
});