Module @conformal/plugin

This package is part of the Conformal Framework! For high-level documentation and tutorials, please see the main documentation website!

This package contains functionality to connect your React UIs to the parameters of a Conformal plug-in.

Basic usage

const DisplayGain = () => {
  const { value } = useNumericParam("gain");
  return <span>{value}</span>;
};
Copy

The main entry points to this package are the useNumericParam, useEnumParam and useSwitchParam hooks, which give quick access to the parameters of your plug-in. In addition to reading parameters, you can also set them using the same hook:

const ResetGainButton = () => {
  const { set } = useNumericParam("gain");
  return (
    <button
      onClick={() => {
        set(0);
      }}
    >
      Set Gain
    </button>
  );
};
Copy

Required providers

In order to use the hooks, your application must be wrapped in a Provider component.

import { Provider } from "@conformal/plugin";
createRoot(document.getElementById("root")!).render(
  <Provider>
    <DisplayGain />
  </Provider>,
);
Copy

Mocking parameters

It can be convenient to mock the parameters of your plug-in so you can iterate on the UI without having to run the full plug-in. Providing a mockInfos prop to the Provider component make hooks fall back to using mock values of parameters when there is no plug-in present.

const mockInfos = new Map<string, Info>(
  Object.entries({
    gain: {
      title: "Gain",
      type_specific: {
        t: "numeric",
        default: 100,
        valid_range: [0, 100],
        units: "%",
      },
    },
  }),
);

createRoot(document.getElementById("root")!).render(
  <Provider mockInfos={mockInfos}>
    <DisplayGain />
  </Provider>,
);
Copy

UI State

Conformal UI can store custom state unrelated to parameters that will persist in the DAW save file. This allows you to retain UI state in the file. The entry point for this is the useUiState hook, please see the docs there.

DevModeTools

The DevModeTools component displays a toggle to switch between the version of the UI that is embedded into the plug-in and a dev server for iterative development.