Bot releases are visible (Hide)
Published by github-actions[bot] almost 3 years ago
get
function to Button and ButtonGroupPublished by github-actions[bot] almost 3 years ago
get
function to Button and ButtonGroupPublished by github-actions[bot] almost 3 years ago
get
function to Button and ButtonGroupPublished by github-actions[bot] almost 3 years ago
Published by github-actions[bot] almost 3 years ago
Published by github-actions[bot] almost 3 years ago
disabled
option to buttonPublished by github-actions[bot] almost 3 years ago
disabled
option to buttonPublished by github-actions[bot] almost 3 years ago
disabled
option to buttonPublished by github-actions[bot] about 3 years ago
title
attribute to Labels when there is no hint
prop.c997410: Plugin: add the Bezier plugin
import { bezier } from '@leva-ui/plugin-bezier'
useControls({ curve: bezier([0.25, 0.1, 0.25, 1]) })
Updated dependencies [c997410]
edc8847: Breaking: change how leva/plugin
exports components.
// before
import { Row, Label, String } from 'leva/plugin'
// after
import { Components } from 'leva/plugin'
const { Row, Label, String } = Components
Feat: add useValue
/ useValues
hooks that let an input query other inputs values.
Feat: normalize
has additional arguments to its signature:
/**
* @path the path of the input
* @data the data available in the store
*/
const normalize = (input: Input, path: string, data: Data)
Feat: sanitize
has additional arguments to its signature:
/**
* @path the path of the input
* @store the store
*/
const sanitize = (
value: any,
settings: Settings,
prevValue: any,
path: string,
store: StoreType
)
Styles: better feedback when dragging number from inner label.
Plugin: add the Plot plugin 📈
import { plot } from '@leva-ui/plugin-plot'
useControls({ y: plot({ expression: 'cos(x)', graph: true, boundsX: [-10, 10], boundsY: [0, 100] }) })
Updated dependencies [edc8847]
Published by github-actions[bot] about 3 years ago
title
attribute to Labels when there is no hint
prop.c997410: Plugin: add the Bezier plugin
import { bezier } from '@leva-ui/plugin-bezier'
useControls({ curve: bezier([0.25, 0.1, 0.25, 1]) })
Updated dependencies [c997410]
edc8847: Breaking: change how leva/plugin
exports components.
// before
import { Row, Label, String } from 'leva/plugin'
// after
import { Components } from 'leva/plugin'
const { Row, Label, String } = Components
Feat: add useValue
/ useValues
hooks that let an input query other inputs values.
Feat: normalize
has additional arguments to its signature:
/**
* @path the path of the input
* @data the data available in the store
*/
const normalize = (input: Input, path: string, data: Data)
Feat: sanitize
has additional arguments to its signature:
/**
* @path the path of the input
* @store the store
*/
const sanitize = (
value: any,
settings: Settings,
prevValue: any,
path: string,
store: StoreType
)
Styles: better feedback when dragging number from inner label.
Plugin: add the Plot plugin 📈
import { plot } from '@leva-ui/plugin-plot'
useControls({ y: plot({ expression: 'cos(x)', graph: true, boundsX: [-10, 10], boundsY: [0, 100] }) })
Updated dependencies [edc8847]
Published by github-actions[bot] about 3 years ago
8aba17c: Allow controlling the collapsed state of LevaPanel via object overload for the controlled
property.
const [collapsed, setCollapsed] = React.useState(false)
const leva = <Leva collapsed={{ collapsed, onChange: (collapsed) => setCollapsed(collapsed) }} />
color
option to folderstitle
attribute to Labels when there is no hint
prop.234cfcd: Add onEditStart
and onEditEnd
callbacks for values.
useControls({
value: {
value: 1,
onEditStart: (value, path) => {},
onEditEnd: (value, path) => {},
},
})
Add path
as a second parameter to onChange
callback to mimic onEditXXX
signature.
a2db0e6: Improve buttonGroup
API.
The label is now completely hidden when specifying key that only includes spaces. Previously the label was still rendered, but without text, this caused ugly spacing when using the oneLineLabels
option on the Leva
component.
const [values, set] = useControls(() => ({
Size: 1,
' ': buttonGroup({
'0.25x': () => set({ Size: 0.25 }),
'0.5x': () => set({ Size: 0.5 }),
'1x': () => set({ Size: 1 }),
'2x': () => set({ Size: 2 }),
'3x': () => set({ Size: 3 }),
}),
}))
It is now possible to set the label
via the buttonGroup
arguments by using the alternative API:
const [values, set] = useControls(() => ({
Width: 1,
WidthPresets: buttonGroup({
label: null,
opts: {
'0.25x': () => set({ Size: 0.25 }),
'0.5x': () => set({ Size: 0.5 }),
'1x': () => set({ Size: 1 }),
'2x': () => set({ Size: 2 }),
'3x': () => set({ Size: 3 }),
},
}),
Height: 1,
HeightPresets: buttonGroup({
label: null,
opts: {
'0.25x': () => set({ Size: 0.25 }),
'0.5x': () => set({ Size: 0.5 }),
'1x': () => set({ Size: 1 }),
'2x': () => set({ Size: 2 }),
'3x': () => set({ Size: 3 }),
},
}),
}))
This also allows passing any JSX element as the label beside strings.
It also helps avoiding a bunch of `` labels (where each new one contains one more space).
d0b45de: Add context
argument to onChange
handler.
The context.initial
boolean parameter can be used to identify whether onChange
is invoked initially.
useControls({
value: {
value: 1,
onChange: (value, { initial }) => {
syncValue(value)
if (!initial) {
saveValueOnRemote(value)
}
},
},
})
The context.fromPanel
boolean parameter can be used to identify whether the onChange
invocation is caused by the Leva
component or via the set
function return from the useControl
hook.
const [, set] = useControls(() => ({
value: {
value: 1,
onChange: (value, { initial, fromPanel }) => {
syncValue(value)
if (!initial && !fromPanel) {
// we don't wanna trigger a remote save in case the value has not been updated from the panel
saveValueOnRemote(value)
}
},
},
}))
The context.get
parameter can be used for retrieving the up to date state of the store. This is handy if you need to do some invocations based on all the store values.
const [, set] = useControls(() => ({
value1: 1,
value2: 2,
value3: {
value: 1,
onChange: (value3, { get }) => {
const { value1, value2 } = get()
// calculate something based on value1 and value2
},
},
}))
50e8096: fix: sanitize step should behave better.
improvement: expand panel when filter changes.
09a1a38: Allow specifying the explicit input type via the type
option. This is handy when you want to prevent your string value being casted to a color or number.
import { LevaInputs, useControls } from 'leva'
useControls({
color: {
type: LevaInputs.STRING,
value: '#f00',
},
number: {
type: LevaInputs.STRING,
value: '1',
},
})
34281d7: Add new value option transient
. This allows opting out of the transient mode when having a onChange
handler invoked.
const data = useControls({
color: {
value: '#7c3d3d',
onChange: (value) => {
console.log(value)
},
transient: false,
},
})
console.log(data) // { color: '#7c3d3d' }
const data = useControls({
color: {
value: '#7c3d3d',
onChange: (value) => {
console.log(value)
},
transient: true,
},
})
console.log(data) // {}
This is handy if you want to use the onChange
handler for triggering a save on a remote server, while still triggering a re-render with the value.
clipboard-polyfill
dependency.50d850a: BREAKING CHANGE: Replace hideTitleBar
with titleBar
option.
For hiding the title bar the usages of <Leva hideTitleBar />
must be replaced with <Leva titleBar={false} />
.
It is now possible to overwrite the six dots rendered as the title by default by providing a title
option to the titleBar
property.
<Leva
titleBar={{
title: 'Some Title',
}}
/>
Its is now possible to disable dragging of the panel via the drag
option to the titleBar
property.
<Leva
titleBar={{
drag: false,
}}
/>
It is now possible to enable or disable filtering of the panel values via the filter
option on the titleBar
property.
<Leva
titleBar={{
filter: true,
}}
/>
7fd9f92: feat: allow input options to be spread inside custom plugin.
b4aa43d: Fix: add empty key warning.
7fd9f92: fix: correct onUpdate for a blurred input: previously bluring an input from a
store while selecting a second store would commit the change on the second
store.
fix: return number previous value when field is empty.
types: (internal) fix default useInputContext types.
e21f2fe: fix: slider position overflowing with range input.
c997410: Plugin: add the Bezier plugin
import { bezier } from '@leva-ui/plugin-bezier'
useControls({ curve: bezier([0.25, 0.1, 0.25, 1]) })
edc8847: Breaking: change how leva/plugin
exports components.
// before
import { Row, Label, String } from 'leva/plugin'
// after
import { Components } from 'leva/plugin'
const { Row, Label, String } = Components
Feat: add useValue
/ useValues
hooks that let an input query other inputs values.
Feat: normalize
has additional arguments to its signature:
/**
* @path the path of the input
* @data the data available in the store
*/
const normalize = (input: Input, path: string, data: Data)
Feat: sanitize
has additional arguments to its signature:
/**
* @path the path of the input
* @store the store
*/
const sanitize = (
value: any,
settings: Settings,
prevValue: any,
path: string,
store: StoreType
)
Styles: better feedback when dragging number from inner label.
Plugin: add the Plot plugin 📈
import { plot } from '@leva-ui/plugin-plot'
useControls({ y: plot({ expression: 'cos(x)', graph: true, boundsX: [-10, 10], boundsY: [0, 100] }) })
Select
accept functions as value or options. Fixes #165.
set
function values with any
when useControls
is used with the function API. In the future, we should infer th value type from the sanitize function.Select
input.set
types in transient mode.0b7e968: Add the invertY
setting for the Vector2D joystick for inverting the y coordinate.
BREAKING: The default behavior has been changed. If you want the same behavior as in previous versions you will have to set the joystick
option to 'invertY'
.
const values = useControl({
vector2d: {
value: [0, 0],
joystick: 'invertY',
},
})
f323cfc: Feat: onChange
callback for transient updates
useControls({ color: { value: 'red', onChange: (v) => console.log(v) } })
div
. This should fix #106.hideCopyButton
property for hiding the copy to clipboard button.Published by github-actions[bot] about 3 years ago
preview
flag to disable dot preview.c997410: Plugin: add the Bezier plugin
import { bezier } from '@leva-ui/plugin-bezier'
useControls({ curve: bezier([0.25, 0.1, 0.25, 1]) })
Updated dependencies [c997410]
Published by github-actions[bot] over 3 years ago
8aba17c: Allow controlling the collapsed state of LevaPanel via object overload for the controlled
property.
const [collapsed, setCollapsed] = React.useState(false)
const leva = <Leva collapsed={{ collapsed, onChange: (collapsed) => setCollapsed(collapsed) }} />
Published by github-actions[bot] over 3 years ago
title
attribute to Labels when there is no hint
prop.Published by github-actions[bot] over 3 years ago
Published by github-actions[bot] over 3 years ago
title
attribute to Labels when there is no hint
prop.Published by github-actions[bot] over 3 years ago
color
option to folderstitle
attribute to Labels when there is no hint
prop.Published by github-actions[bot] over 3 years ago
Published by github-actions[bot] over 3 years ago
Published by github-actions[bot] over 3 years ago