Button type?

[TheKnarf]

I don't see an input type for button under inputs.

I think the syntax should be something like the following:

useControls({
  myButton1: () => { console.log("button mybutton1 was clicked") },
  myButton2: () => { console.log("button mybutton2 was clicked") },
});

Where useControls would detect if a parameter was typeof Function and then render it as a button that you can click on.

Seems like there is even an empty docs section mentioning buttons?

[TheKnarf]

I tried creating a plugin for it:

import React from 'react';
import { Leva, useControls } from 'leva';
import { createPlugin } from 'leva/plugin';
import { useInputContext, Components } from 'leva/plugin';

const { Row, Label } = Components;

const LevaButton = (...args) => {
  const { label, displayValue, onUpdate, settings } = useInputContext<any>();
  
  const onClick = () => {
    if(typeof displayValue.onClick == 'function') {
      displayValue.onClick();
    }
  };
  
  return <>
    <Row input>
      <Label>{label}</Label>
      <button type="button" onClick={onClick}>{displayValue.name || label}</button>
    </Row>
  </>
};

export const button = createPlugin({
  component: LevaButton,
});

export { Leva, useControls };

And then I can use it as:

import { Leva, useControls, button } from '../leva/leva.tsx';

const MyComponent : React.FC = () => {
  useControls({
    btn1: button({
      name: 'Button 1',
      onClick: () => { console.log('button 1') },
    }),
    btn2: button({
      name: 'Button 2',
      onClick: () => { console.log('button 2') },
    }),
  });

  return <div>
    <Leva />
  </div>;
};

But the styling is a bit weird, and I'm unsure if I'm creating a plugin in the correct way given that its not documented. This also forces me to wrap each property in a button when using useControls. So I still think it would be useful to have it built inn.

[TheKnarf]

Okay... So after writing my own plugin I found that leva already had a button component in their storybook...

It just wasn't documented in the docs folder...