πŸŒ‹ React-first components GUI

Related tags

UI Layout react gui
Overview

npm (tag) npm bundle size GitHub Workflow Status Discord Shield


A GUI you are going to lava.
Customizable, extensible and beautiful by default.



🚧 🚧 This repo is under heavy development 🚧 🚧

Features

  • ⭐️ Beautiful by default
  • 🎚 More than 12 different kinds of inputs available
  • 🧐 Smart input type recognition
  • πŸ”Œ Easy-to-make plugins
  • βœ… Keyboard accessible
  • ⚑️ No setup necessary

Installation

npm i leva

Quick start

Simply call the useControls hook from anywhere in your app:

import { useControls } from "leva"

function MyComponent() {
  const { name, aNumber } = useControls({ name: "World", aNumber: 0 })
  
  return <div>Hey {name}, hello! {aNumber}</div>
}

Documentation

Contributors ✨

Thanks goes to these wonderful people (emoji key):


David Bismut

πŸ€” πŸ’»

Gianmarco

πŸ€” πŸ’»

Andrew Prifer

πŸ€” πŸ’»

Aria

πŸ€”

Han

🎨

Ivan Rossi

πŸ›

Marco Fugaro

πŸ€”

Marco Ludovico Perego

πŸ€”

clementcassajus

🎨

thephoenixofthevoid

πŸ›

This project follows the all-contributors specification. Contributions of any kind welcome!

Comments
  • API Request: onChange callback

    API Request: onChange callback

    First of all, thanks for your great work, I really love it. 😊

    I just think it could be a good idea to add an onChange callback to input configurations, so that we can run some effects more directly.

    enhancement 
    opened by HongchengZhao 14
  • Custom class/id for controls

    Custom class/id for controls

    I'm trying to set a class for some controls in order to write some integration tests but can't find any way to do that. I tried looking in the examples + code but didn't find anything. Is it possible? If not it would be nice having a way to add it when setting up the hook.

    Thanks for this awesome library :)

    enhancement 
    opened by js2702 14
  • feat: Set inputs and folders order

    feat: Set inputs and folders order

    Allow to set the order in which elements appear, following a rule similar to CSS order property.

    Example:

    useControls(() => ({
      last: folder({ firstVal: 0 }, { order: 1, collapsed: true }),
      middle: folder({ secondVal: 0 }, { order: -1, collapsed: true }),
      first: { value: 0, order: -2 },
    }))
    
    opened by RodrigoHamuy 8
  • Feat: plugin plot (WIP)

    Feat: plugin plot (WIP)

    The plot plugin uses mathjs.

    https://user-images.githubusercontent.com/5003380/111231416-8890d780-85e9-11eb-972d-4bbe7bcaa750.mp4

    The plot input required access to other input values, which makes it an interesting use case, which will probably require to refactor some of the API as the current state of work is pretty ugly. Cool but ugly.

    opened by dbismut 8
  • Adding controls to an already Mounted Panel

    Adding controls to an already Mounted Panel

    Hi,

    I am trying to add a control to a Panel after it's already mounted.

    https://codesandbox.io/s/vigilant-haslett-tzdl4?file=/src/App.js

    It seems the hook doesn't register updates when the identity of the config object changes. Can you advise on the best approach for adding controls after the initial panel mount?

    Thanks

    opened by peterjcaulfield 8
  • Using useGLTF from react-three-drei

    Using useGLTF from react-three-drei

    When I use a list of GLTF files to show its 3D image, at the begining they all show, but when I try to select the ones I selected before, the image will not show again. Looks like once the image was showed it doesn't re-renders and there is no browser memory to show it back. Do you know how to fix this? I tried attaching a useEffect when the list changes but doesn't work.

    `import { useEffect } from 'react' import { Canvas } from '@react-three/fiber' import { useGLTF, OrbitControls} from '@react-three/drei' import {useControls} from 'leva' import Papir1 from '../resources/BP_LD.gltf' import Papir2 from '../resources/CC_LD.gltf' import Papir3 from '../resources/MC_LD.gltf'

    export default function Papir3D() {

    const papirs = {      
        "1137 - Berenguer i Petronella" : Papir1,
        "1412 - Compromis de Casp": Papir2,
        "1605-1608 Mapa Cathalonia": Papir3
    }    
    
    const {papir} = useControls({transient: false, papir: { options: Object.keys(papirs) } })
    
    useEffect(() => {
    
    }, [papir])
    
    function Model({ url, ...props }) {
        const { scene } = useGLTF(url)
        return <primitive object={scene} {...props} />
    }
    
    return(
        <>
        <Canvas camera={{ position: [2, 1, 2], fov: 25 }}>
            <hemisphereLight color="white" groundColor="blue" intensity={0.75} />
            <spotLight position={[50, 50, 10]} angle={0.15} penumbra={1} />
            <Model position={[0, 0, 0]} url={papirs[papir]} />         
            <OrbitControls />
        </Canvas>
        </>
    
    )
    

    }`

    opened by Mjorldir 7
  • Feat: plugin bezier

    Feat: plugin bezier

    const { curve } = useControls({ curve: bezier() })
    // or
    const { curve } = useControls({ curve: bezier([0.54, 0.05, 0.6, 0.98]) })
    // or
    const { curve } = useControls({ curve: bezier('in-out-quadratic') })
    // or 
    const { curve } = useControls({ curve: bezier({ handles: [0.54, 0.05, 0.6, 0.98], graph: false }) })
    

    TODO:

    • [x] add more presets
    opened by dbismut 7
  • `@radix-ui/*` upgrades to prevent peerDeps warnings with React 18

    `@radix-ui/*` upgrades to prevent peerDeps warnings with React 18

    Previous versions of @radix-ui/react-portal @radix-ui/react-tooltip declared a peerDep for "react" as follow:

      "peerDependencies": {
        "react": "^16.8 || ^17.0",
        "react-dom": "^16.8 || ^17.0"
      },
    

    cf. https://github.com/radix-ui/primitives/blob/4896ca04f425d443e9ac08614bffcf02532e7df1/packages/react/portal/package.json#L25

    causing many warnings in React 18 projects:

    npm WARN ERESOLVE overriding peer dependency
    npm WARN While resolving: @radix-ui/[email protected]
    npm WARN Found: [email protected]
    npm WARN node_modules/react
    npm WARN   react@"^18.2.0" from the root project
    npm WARN   24 more (@emotion/react, @emotion/styled, ...)
    npm WARN 
    npm WARN Could not resolve dependency:
    npm WARN peer react@"^16.8 || ^17.0" from @radix-ui/[email protected]
    npm WARN node_modules/@radix-ui/react-presence/node_modules/@radix-ui/react-compose-refs
    npm WARN   @radix-ui/react-compose-refs@"0.1.0" from @radix-ui/[email protected]
    npm WARN   node_modules/@radix-ui/react-presence
    npm WARN 
    npm WARN Conflicting peer dependency: [email protected]
    npm WARN node_modules/react
    npm WARN   peer react@"^16.8 || ^17.0" from @radix-ui/[email protected]
    npm WARN   node_modules/@radix-ui/react-presence/node_modules/@radix-ui/react-compose-refs
    npm WARN     @radix-ui/react-compose-refs@"0.1.0" from @radix-ui/[email protected]
    npm WARN     node_modules/@radix-ui/react-presence
    npm WARN ERESOLVE overriding peer dependency
    npm WARN While resolving: @radix-ui/[email protected]
    npm WARN Found: [email protected]
    npm WARN node_modules/react
    npm WARN   react@"^18.2.0" from the root project
    npm WARN   24 more (@emotion/react, @emotion/styled, ...)
    ...
    

    In most recent versions of @radix-ui/react-portal @radix-ui/react-tooltip peerDeps were updated to:

    "peerDependencies": {
        "react": "^16.8 || ^17.0 || ^18.0",
        "react-dom": "^16.8 || ^17.0 || ^18.0"
      },
    

    cf. https://github.com/radix-ui/primitives/blob/f0a7495bcd00faa14164b2f80721149238c85d9d/packages/react/portal/package.json#L24


    So I have upgraded those 2 packages to their latest version:

    $ yarn workspace leva add @radix-ui/react-portal @radix-ui/react-tooltip
    

    Despite of the MAJOR bump, there was no breaking change from what I've seen.cf. the comment below

    I also checked Storybook was ok.

    But please make sure everything is fully functional since this is my first PR on this project.

    opened by abernier 6
  • fix slider position overflow

    fix slider position overflow

    Hi, this is another small fix

    I have fixed this annoying glitch with slider. It happens on some values and probably this is browser calc rounding miss

    before Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2021-03-25 Π² 12 41 02

    after Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2021-03-25 Π² 12 42 04

    opened by jeetiss 6
  • fix folder + button group

    fix folder + button group

    fix #169

    buttonGroup with empty key overwrites folder structure. I change empty key to __LEVA_EMPTY_LABEL_ for buttonGroup and hide this label in component.

    I hope you like fix and let me know if you find better solution for this issue.

    opened by jeetiss 6
  • Proposal: render the UI conditionally

    Proposal: render the UI conditionally

    Sometimes, it is useful to show the pane conditionally, while everything works the same. In my case, I need to show the pane only to designers and not the client. I achieve this via a special url, and I have a check like

    export const DEBUG = window.location.search.includes('?debug')
    

    which check if ?debug is appended to the url.

    WIth use-tweaks, we achieved this with a really dirty useTweaksOnDebug:

    const getValuesFromTweaks = (...args: any[]) => {
      const obj = typeof args[0] === 'object' ? args[0] : args[1]
    
      const getEntries = (obj: any): any => {
        return Object.keys(obj).flatMap((k) => {
          const v = obj[k]
    
          if (v.type !== undefined) {
            if (v.type === 1) {
              // Folder
              return getEntries(v.schema)
            } else {
              // Button or Separator
              return []
            }
          } else {
            return [[k, v.value ?? v]] // array of tuple because of flatmap
          }
        })
      }
    
      return Object.fromEntries(getEntries(obj))
    }
    
    export const useTweaksOnDebug: typeof useTweaks = DEBUG ? useTweaks : getValuesFromTweaks
    

    I don't know how the API of this would look like if we plan to remove the <Twix> component, any solution is appreciated.

    opened by marcofugaro 6
  • request: take null in addition to undefined for images?

    request: take null in addition to undefined for images?

    Discussed on Discord: https://discord.com/channels/740090768164651008/804345339636219924/1060937162377408562

    me: "Q for you about image inputs; what was your thought on "undefined" as the value for "no image yet", vs supporting null instead / as well?

    The explicit warning I get on providing null makes me think you've thought this through and decided against it; in my ClojureScript wrapper around leva.cljs, I'm finding that ClojureScript maps both "undefined" and "nil" to JavaScript's "null" . Obviously this isn't leva's problem, but null naively seems like it'd be reasonable to allow for the no-image-set-yet case, and would make life a lot easier."

    @dbismut : "I understand the image problem, no worries we can support null"

    opened by sritchie 0
  • Checkbox labels are too short

    Checkbox labels are too short

    Thank you for this awesome OS project. It's great!

    Is there a simple way to be able to have the checkboxes extend to the right side or the ability to provide more width to the labels themselves?

    I didn't see anything in the docs regarding styling.

    Screenshot 2023-01-03 at 6 52 01 PM
    opened by FarhadG 0
  • unable to install leva, got error on

    unable to install leva, got error on "unable to resolve dependency tree"

    I got the following error while installing leva:

    ╰─ npm i leva          
    npm ERR! code ERESOLVE
    npm ERR! ERESOLVE unable to resolve dependency tree
    npm ERR! 
    npm ERR! Found: [email protected]
    npm ERR! node_modules/react
    npm ERR!   peer react@"^16.x || ^17.x || ^18.x" from @radix-ui/[email protected]
    npm ERR!   node_modules/@radix-ui/react-icons
    npm ERR!     @radix-ui/react-icons@"^1.0.3" from [email protected]
    npm ERR!     node_modules/r3f-perf
    npm ERR!       r3f-perf@"6.5" from the root project
    npm ERR!   peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from @react-spring/[email protected]
    npm ERR!   node_modules/@react-spring/animated
    npm ERR!     @react-spring/animated@"~9.6.1" from @react-spring/[email protected]
    npm ERR!     node_modules/@react-spring/core
    npm ERR!       @react-spring/core@"~9.6.1" from @react-spring/[email protected]
    npm ERR!       node_modules/@react-spring/three
    npm ERR!         @react-spring/three@"^9.3.1" from @react-three/d[email protected]
    npm ERR!         node_modules/@react-three/drei
    npm ERR!     @react-spring/animated@"~9.6.1" from @react-spring/[email protected]
    npm ERR!     node_modules/@react-spring/three
    npm ERR!       @react-spring/three@"^9.3.1" from @react-three/[email protected]
    npm ERR!       node_modules/@react-three/drei
    npm ERR!         peer @react-three/drei@"*" from [email protected]
    npm ERR!         node_modules/r3f-perf
    npm ERR!         1 more (the root project)
    npm ERR!   18 more (@react-spring/core, @react-spring/shared, ...)
    npm ERR! 
    
    npm ERR! Could not resolve dependency:
    npm ERR! peer react@"^16.8 || ^17.0" from @radix-ui/[email protected]
    npm ERR! node_modules/leva/node_modules/@radix-ui/react-portal
    npm ERR!   @radix-ui/react-portal@"^0.1.3" from [email protected]
    npm ERR!   node_modules/leva
    npm ERR!     leva@"*" from the root project
    npm ERR! 
    npm ERR! Fix the upstream dependency conflict, or retry
    npm ERR! this command with --force, or --legacy-peer-deps
    npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
    npm ERR! 
    npm ERR! See /Users/minioat/.npm/eresolve-report.txt for a full report.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /Users/minioat/.npm/_logs/2022-12-29T17_12_11_451Z-debug.log
    

    I have the following npm packages installed for this local project:

    β”œβ”€β”€ @react-three/[email protected]
    β”œβ”€β”€ @react-three/[email protected]
    β”œβ”€β”€ [email protected]
    β”œβ”€β”€ [email protected]
    β”œβ”€β”€ [email protected]
    β”œβ”€β”€ [email protected]
    └── [email protected]
    

    I found the following suggestions from StackOverflow, and they worked. However, I still don't know what was causing the error. So, can anyone advise? Thanks.

    npm install --save --legacy-peer-deps
    npm config set legacy-peer-deps true
    npm cache clean --force
    

    Source: https://stackoverflow.com/a/71786513/2559693

    After applying the suggestions above, my local npm packages are:

    ╰─ npm --version 
    7.13.0
    
    ╰─ npm list     
    β”œβ”€β”€ @react-three/[email protected]
    β”œβ”€β”€ @react-three/[email protected]
    β”œβ”€β”€ [email protected]
    β”œβ”€β”€ [email protected]
    β”œβ”€β”€ [email protected]
    β”œβ”€β”€ [email protected]
    β”œβ”€β”€ [email protected]
    └── [email protected]
    
    opened by hopezh 3
  • Export styled variable

    Export styled variable

    I'm making a simple editor, and found your style is very good when using leva. (I'm using @stitches/react too)

    I hope you can export the styled variable so that developers can better use the same theme.

    opened by gz65555 0
  • One

    One

    This PR will result in v1.0.0 of Leva. It will include breaking changes.

    It aims at:

    • [x] migrate to pnpm instead of yarn
    • [x] upgrade to React 18
    • [ ] use the startTransition API
    • [x] upgrade to zustand v4
    • [x] rename the transient option key to reactive
    • [ ] sync with external stores
    • [ ] move away from stitches if necessary
    • [ ] resizable panel?
    opened by dbismut 7
  • Using useGLTF from react-three-drei

    Using useGLTF from react-three-drei

    When I use a list of GLTF files to show its 3D image, at the begining they all show, but when I try to select the ones I selected before, the image will not show again. Looks like once the image was showed it doesn't re-renders and there is no browser memory to show it back. Do you know how to fix this? I tried attaching a useEffect when the list changes but doesn't work.

    This is the sandbox of a working project with simple images, it works perfect: https://codesandbox.io/s/pairing-threejs-to-ui-wlz1o0?file=/src/App.js:558-619

    The problem is when I use larger files. I can't upload more than 50Mb to sandbox, so just 2 of 3 files: https://codesandbox.io/s/shy-framework-e4hubp?file=/src/App.js

    When you change the file, it remembers the last one displayed.

    opened by Mjorldir 0
  • [email protected](Oct 28, 2022)

  • [email protected](Oct 28, 2022)

  • @leva-ui/[email protected](Oct 28, 2022)

  • [email protected](Oct 22, 2022)

  • @leva-ui/[email protected](Oct 22, 2022)

  • [email protected](Sep 2, 2022)

  • [email protected](Aug 3, 2022)

    Patch Changes

    • fd8b07f: feat: add onDrag / onDragStart / onDragEnd callbacks when dragging Leva panel.
    • 81acf37: fix: allow interval to be set externally with [number, number]
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Jul 7, 2022)

    Patch Changes

    • 29aece8: Fix a an issue where a string starting with a number would be considered as a number with a potentially long unit. Now we consider a string as a number when its suffix is less than 4 characters long.
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Jun 27, 2022)

  • [email protected](May 15, 2022)

  • [email protected](May 15, 2022)

  • [email protected](May 5, 2022)

  • [email protected](May 4, 2022)

  • [email protected](Feb 21, 2022)

  • [email protected](Feb 21, 2022)

  • @leva-ui/[email protected](Feb 21, 2022)

  • [email protected](Feb 18, 2022)

  • [email protected](Feb 7, 2022)

  • [email protected](Feb 7, 2022)

  • [email protected](Dec 17, 2021)

  • @leva-ui/[email protected](Dec 17, 2021)

  • @leva-ui/[email protected](Dec 17, 2021)

  • [email protected](Dec 15, 2021)

  • [email protected](Nov 29, 2021)

  • [email protected](Nov 21, 2021)

  • @leva-ui/[email protected](Nov 21, 2021)

  • @leva-ui/[email protected](Nov 21, 2021)

  • [email protected](Sep 17, 2021)

    leva

    1.0.0

    Minor Changes

    • 1001f25: Fix version for stitches before moving to 1.x

    0.9.13

    Patch Changes

    • 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) }} />
      

    0.9.12

    Patch Changes

    • 4f51de7: Switch from tinycolor to colord
    • dd17591: chore: update to stitches 0.2.0
    • ac99a90: feat: add color option to folders
    • d5a5dd2: - Fix: prevent selection on Firefox when closing the Color picker.
      • Fix: add suffix to Number plugin initial value.
      • Feat: add title attribute to Labels when there is no hint prop.

    0.9.11

    Patch Changes

    • cedd742: chore: update deps

    0.9.10

    Patch Changes

    • 16e3c14: feat: add clamp Range and Interval initial values to bounds. feat: when title is empty show the drag dots.

    0.9.9

    Patch Changes

    • f8f7b57: fix: double render issue when using nested components.

    0.9.8

    Patch Changes

    • e29e5fd: style: wrap hint text

    0.9.7

    Patch Changes

    • d5383c0: fix: fix bug in which the panel would remove the root node of the app.

    0.9.6

    Patch Changes

    • 0511799: styles: remove manual 'leva__' prefix from stitches styles.

    0.9.5

    Patch Changes

    • 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
          },
        },
      }))
      

    0.9.4

    Patch Changes

    • 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',
        },
      })
      

    0.9.3

    Patch Changes

    • 7edbb69: chore: update dependencies.

    0.9.2

    Patch Changes

    • 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.

    0.9.1

    Patch Changes

    • 09ac7b1: chore: remove clipboard-polyfill dependency.

    0.9.0

    Patch Changes

    • 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,
        }}
      />
      

    0.8.4

    Patch Changes

    • e0fdefc: types: fix beautifier union type.

    0.8.3

    Patch Changes

    • a7f9bf1: types: don't use union type when not using objects as plugin function args.

    0.8.2

    Patch Changes

    • 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.

    0.8.1

    Patch Changes

    • c997410: Plugin: add the Bezier plugin

      import { bezier } from '@leva-ui/plugin-bezier'
      useControls({ curve: bezier([0.25, 0.1, 0.25, 1]) })
      

    0.8.0

    Minor Changes

    • 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] }) })
      

    0.7.3

    Patch Changes

    • f9f7f1e: - Have Select accept functions as value or options. Fixes #165.
      • Temporarily type the 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.

    0.7.2

    Patch Changes

    • d2eaf58: fix: properly resolves value-keyed objects for the Select input.

    0.7.1

    Patch Changes

    • 98984e1: types: fix set types in transient mode.

    0.7.0

    Minor Changes

    • 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',
        },
      })
      

    Patch Changes

    • f323cfc: Feat: onChange callback for transient updates

      useControls({ color: { value: 'red', onChange: (v) => console.log(v) } })
      

    0.6.3

    Patch Changes

    • fa909f0: Allow useControls to update settings and input options when dependency array changes. (See #124)

    0.6.2

    Patch Changes

    • 72bcebe: Reject null Vectors

    0.6.1

    Patch Changes

    • 66dcb79: Add id to root div so that we're sure to always use the same root div. This should fix #106.
    • c6a69e3: Fix scrollbars flashing when collapsing a folder. Fixes #139.
    • 9e32b2c: Prevent errors in node environments by aliasing stitches global identifier to _global as global indentifier is reserved

    0.6.0

    Minor Changes

    • ce42683: Add hideCopyButton property for hiding the copy to clipboard button.
    Source code(tar.gz)
    Source code(zip)
  • @leva-ui/[email protected](Sep 17, 2021)

    @leva-ui/plugin-spring

    1.0.0

    Minor Changes

    • 1001f25: Fix version for stitches before moving to 1.x

    Patch Changes

    0.9.12

    Patch Changes

    • 4f51de7: Switch from tinycolor to colord
    • d5a5dd2: - Fix: prevent selection on Firefox when closing the Color picker.
      • Fix: add suffix to Number plugin initial value.
      • Feat: add title attribute to Labels when there is no hint prop.
    • Updated dependencies [4f51de7]
    • Updated dependencies [dd17591]
    • Updated dependencies [ac99a90]
    • Updated dependencies [d5a5dd2]

    0.9.10

    Patch Changes

    • 3570975: chore: update core dependency.
    • Updated dependencies [16e3c14]

    0.9.8

    Patch Changes

    • f8f7b57: fix: double render issue when using nested components.
    • Updated dependencies [f8f7b57]

    0.9.6

    Patch Changes

    • 0511799: styles: remove manual 'leva__' prefix from stitches styles.
    • Updated dependencies [0511799]

    0.9.3

    Patch Changes

    0.8.1

    Patch Changes

    • 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]

    0.8.0

    Patch Changes

    • 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]

    0.7.0

    Patch Changes

    0.6.0

    Patch Changes

    Source code(tar.gz)
    Source code(zip)
  • @leva-ui/[email protected](Sep 17, 2021)

    @leva-ui/plugin-plot

    1.0.0

    Minor Changes

    • 1001f25: Fix version for stitches before moving to 1.x

    Patch Changes

    0.9.12

    Patch Changes

    • d5a5dd2: - Fix: prevent selection on Firefox when closing the Color picker.
      • Fix: add suffix to Number plugin initial value.
      • Feat: add title attribute to Labels when there is no hint prop.
    • Updated dependencies [4f51de7]
    • Updated dependencies [dd17591]
    • Updated dependencies [ac99a90]
    • Updated dependencies [d5a5dd2]

    0.9.10

    Patch Changes

    • 3570975: chore: update core dependency.
    • Updated dependencies [16e3c14]

    0.9.8

    Patch Changes

    • f8f7b57: fix: double render issue when using nested components.
    • Updated dependencies [f8f7b57]

    0.0.3

    Patch Changes

    • 0511799: styles: remove manual 'leva__' prefix from stitches styles.
    • Updated dependencies [0511799]

    0.0.2

    Patch Changes

    • 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]

    0.0.1

    Patch Changes

    • 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]

    Source code(tar.gz)
    Source code(zip)
Owner
Poimandres
Open source developer collective
Poimandres
A responsive (mobile-first) grid system built with emotion.

Emotion grid A responsive (mobile-first) grid system built with emotion. Quick start Installation You can use yarn or npm. Emotion is used has peerDep

Matheus Verissimo 11 Jun 4, 2022
A no-frills flexbox grid system for React, powered by styled-components.

Quick Jump Quick Jump Features Requirements Installation Using yarn Using npm Usage Basic Example Responsive Example Upgrading Documentation Grid.Prov

Garet McKinley 858 Dec 20, 2022
Resizable Flex layout container components for advanced React web applications

About Re-F|ex Re-F|ex is a React flex-based layout component library which I created because none of the components I found out there could satisfy my

Philippe Leefsma 532 Jan 8, 2023
React components that allow you to divide a page or container into nestable anchored, scrollable and resizable spaces.

React Spaces An easy to understand and nestable layout system, React Spaces allow you to divide a page or container into anchored, scrollable and resi

Allan Eagle 1.1k Dec 30, 2022
Carpatin is a React JS Admin Dashboard Template that focuses on the management flows of a back-office application. We leverage the Material-UI power of stylizing the components in a way that feels more professional.

Carpatin is a React JS Admin Dashboard Template that focuses on the management flows of a back-office application. We leverage the Material-UI power of stylizing the components in a way that feels more professional.

Devias 64 Dec 12, 2022
FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved.

FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved.

Caplin 649 Jan 7, 2023
Resizable Flex layout container components for advanced React web applications

About Re-F|ex Re-F|ex is a React flex-based layout component library which I created because none of the components I found out there could satisfy my

Philippe Leefsma 530 Dec 21, 2022
Kilvin is a set of universal & primitive Layout Components for React.

Kilvin is a set of universal & primitive Layout Components for React.

Robin Weser 21 May 26, 2022
🦸 Motion Layout - Create beautiful immersive React hero animations using shared components.

Motion Layout Create beautiful immersive React hero animations using shared components. Docs React Motion Layout Docs About Motivation There are amazi

Jefferson Licet 584 Dec 25, 2022
Make your React Components aware of their width and height!

Make your React Components aware of their width and/or height! Hyper Responsive Components! Performant. Easy to use. Extensive browser support. Suppor

Sean Matheson 1.9k Dec 28, 2022
React Responsive Grid Layout makes it easy to develop fluid layouts for mobile, tablet and desktop using ReactJs, Styled Components, CSS and Flexbox.

React Responsive Grid Layout makes it easy to develop fluid layouts for mobile, tablet and desktop using ReactJs, Styled Components, CSS and Flexbox.

Taras Pysarskyi 14 Sep 26, 2022
Responsive JSX layouts with Styled Components

React Super Styled Responsive JSX layouts with Styled Components Try the DEMO RSS is a small React component library which aims to accelerate authorin

Peter Morawiec 77 Sep 15, 2022
Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

kodyl 236 Nov 18, 2022
React-Grid-Layout is a grid layout system much like Packery or Gridster, for React.

A draggable and resizable grid layout with responsive breakpoints, for React.

RGL 16.9k Jan 2, 2023
Responsive styles for react-native and react-native-web

React Native Responsive Styles rn-responsive-styles Create responsive styles for react-native and react-native-web with minimal rerenders This library

Kheva Mann 21 Dec 13, 2022
React-layout - Layout component for React. Handling the overall layout of a page

Layout Handling the overall layout of a page. ⚠️ Note: Implemented with flex lay

uiw 2 Jul 10, 2022
React-masonry - An easy to use and simple masonry layout for React Js based on flexbox column

React Masonry An easy to use and simple masonry layout for React Js based on fle

null 16 Dec 23, 2022
Auto Responsive Layout Library For React

autoresponsive-react Auto responsive grid layout library for React. Who are using ⭐ ⭐ ⭐ alibaba/ice ⭐ ⭐ ⭐ ice-lab/react-materials ⭐ ⭐ ⭐ ant-design/ant

θΎΎε³°ηš„ε€ε€© 1.5k Dec 15, 2022
React splitter component, written in TypeScript.

Splitters for React v. 1.2.0 New version changes fixed issue v. 1.1.0 New version changes fixed issue with getBoundingClientRect in React 16 NPM Demo

Martin NovΓ‘k 149 Dec 26, 2022