Have 2 separate independent panels with different options each

[donlluque]

Hello everyone! First of all, thank you in advance for all the help you can provide.

Is it possible to have 2 separate independent panels with different options at the same time in one component? For example, I have an image where in one panel I would like to change the color and position. And in another separate panel, I would like to make it visible or change the opacity.

Thank you!

[jdpigeon]

This is possible! Just have to create different leva stores using the useCreateStore hook and pass them into the store field in the useControls hooks options

[Jbmanllr]

Any chance the team add a proper documentation?

[baxiee]

@jdpigeon Hi man, I dont want to be rude, but if you know the solution why you didnt put code snippet. This tool has terrible documentation.

[xiduzo]

@baxiee Hi man,

I dont want to be rude, but if you really wanted this, you could have searched a bit more yourself.

For those who are stuck on the same;

You can pass a store to the configuration of the useControls to have multiple panels.

import React from 'react'
import { useControls, useStoreContext, useCreateStore, LevaPanel, LevaStoreProvider } from 'leva'

function MyComponent() {
  const store = useStoreContext()
  useControls({ point: [0, 0] }, { store })
  return null
}

export default function App() {
  const store1 = useCreateStore()
  const store2 = useCreateStore()
  useControls({ color: '#fff' }, { store: store1 })
  useControls({ boolean: true }, { store: store2 })
  return (
    <div
      style={{
        display: 'grid',
        width: 300,
        gridRowGap: 10,
        padding: 10,
        background: '#fff',
      }}>
      <LevaPanel store={store1} fill flat titleBar={false} />
      <LevaPanel store={store2} fill flat titleBar={false} />
      <LevaStoreProvider store={store1}>
        <MyComponent />
      </LevaStoreProvider>
    </div>
  )
}

From the sandbox examples https://github.com/pmndrs/leva/blob/f66726534e85e356af64c4556cb5c8b605175598/demo/src/sandboxes/leva-advanced-panels/src/App.jsx#L5

[baxiee]

@xiduzo Thanks for the solution — it’ll definitely help others with the same issue. I actually stopped using Leva because of the poor docs and constant issues. Spent way too many days on it back then, so I ended up building my own custom solution instead.

[baxiee]

@xiduzo One more thing — it’s easy to say “if you really wanted it, you could’ve searched a bit more” when you already know the answer exists and where to look for it. You’re sending me code snippets and saying “of course, you can do it like this — it’s right there in file X, line 44.”. But the thing is — there's no mention of this in the available documentation or Storybook.

[gsimone]

Better docs will come soon, in the meantime be nice to each other 🤗