Helper components? LevaSwitch

[bhouston]

In my project, I have the need to create easy toggleable elements. To do this, I created this component:

import { useControls } from 'leva';

export type LevaSwitchProps = {
  name: string;
  initialState?: boolean;
  children: React.ReactNode;
};

export const LevaSwitch: React.FC<LevaSwitchProps> = ({
  name,
  initialState,
  children
}) => {
  const controls = useControls({
    [name]: {
      value: initialState === false ? false : true,
      label: name
    }
  });
  return controls[name] ? children : null;
};

Then you can use it in your code incredibly simply:

<LevaSwitch name="debugLog" initialState="true"><DebugLog></LevaSwitch>

This makes it very easy to make toggle-able elements. Maybe this type of component could be included in Leva? I have some ideas for other helper components as well..