Helper components? LevaSwitch
Opened this issue · 0 comments
bhouston commented
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..