{"id":13475241,"url":"https://github.com/mat-sz/react-var-ui","last_synced_at":"2025-07-19T00:37:15.200Z","repository":{"id":57347340,"uuid":"376302419","full_name":"mat-sz/react-var-ui","owner":"mat-sz","description":"React component library for variable setting and preview.","archived":false,"fork":false,"pushed_at":"2024-03-07T18:18:14.000Z","size":2163,"stargazers_count":83,"open_issues_count":0,"forks_count":12,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-07-05T07:07:31.202Z","etag":null,"topics":["component","datgui","gui","javascript","javascript-library","library","react","react-component","react-components","reactjs","threejs","typescript","typescript-library"],"latest_commit_sha":null,"homepage":"https://demo.mat.dev/react-var-ui/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause-clear","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mat-sz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-12T13:56:16.000Z","updated_at":"2024-12-28T10:49:57.000Z","dependencies_parsed_at":"2023-12-28T12:54:49.536Z","dependency_job_id":"49b847a1-8402-4922-9edc-f46f514e3462","html_url":"https://github.com/mat-sz/react-var-ui","commit_stats":{"total_commits":172,"total_committers":1,"mean_commits":172.0,"dds":0.0,"last_synced_commit":"c9fd00c9a9865aedd93a68c3e2fc5d7381fbea61"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"purl":"pkg:github/mat-sz/react-var-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mat-sz%2Freact-var-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mat-sz%2Freact-var-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mat-sz%2Freact-var-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mat-sz%2Freact-var-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mat-sz","download_url":"https://codeload.github.com/mat-sz/react-var-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mat-sz%2Freact-var-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265863793,"owners_count":23840888,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","datgui","gui","javascript","javascript-library","library","react","react-component","react-components","reactjs","threejs","typescript","typescript-library"],"created_at":"2024-07-31T16:01:18.652Z","updated_at":"2025-07-19T00:37:15.177Z","avatar_url":"https://github.com/mat-sz.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://demo.mat.dev/react-var-ui/\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/mat-sz/react-var-ui/main/screenshot.png\" alt=\"Screenshot\" width=\"700px\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"workflow\" src=\"https://img.shields.io/github/actions/workflow/status/mat-sz/react-var-ui/main.yml?branch=main\"\u003e\n\u003ca href=\"https://npmjs.com/package/react-var-ui\" target=\"_blank\"\u003e\n\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/react-var-ui\"\u003e\n\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dw/react-var-ui\"\u003e\n\u003cimg alt=\"NPM\" src=\"https://img.shields.io/npm/l/react-var-ui\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://main--613369a1b99e84003a3bfc4e.chromatic.com/\" target=\"_blank\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg\"\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n**react-var-ui** is a simple React component library for variable setting and preview, inspired by iOS settings, [react-dat-gui](https://github.com/claus/react-dat-gui) and [dat.gui](https://github.com/dataarts/dat.gui).\n\nWhile some code from react-dat-gui was used, this library functions in a completely different way. The codebase uses modern React code practices such as hooks and functional components. Instead of iterating over the children array, react-var-ui uses a Context. Creation of custom components is also easier.\n\nWhat makes react-var-ui different when compared to similar libraries such as [Leva](https://github.com/pmndrs/leva) or [react-dat-gui](https://github.com/claus/react-dat-gui), react-var-ui doesn't force itself to float over all your content, instead react-var-ui lives peacefully inside of the React node it is placed in. Unlike Leva and much more like react-dat-gui, react-var-ui relies on a local state variable, providing the developer with more flexibility. While this might seem less convenient, it allows for more customization and usage of multiple instances of react-dat-gui within one project.\n\n## Table of contents\n\n- [Installation](#installation)\n- [Example usage](#example-usage)\n- [Testing](#testing)\n- [Utility components](#utility-components)\n  - [VarUI](#varui-)\n  - [VarCategory](#varcategory-)\n  - [VarArray](#vararray-)\n- [Input components](#input-components)\n  - [Base properties](#base-properties)\n  - [VarAngle](#varangle-)\n  - [VarBase](#varbase-)\n  - [VarButton](#varbutton-)\n  - [VarColor](#varcolor-)\n  - [VarDisplay](#vardisplay-)\n  - [VarFile](#varfile-)\n  - [VarImage](#varimage-)\n  - [VarMedia](#varmedia-)\n  - [VarNumber](#varnumber-)\n  - [VarSelect](#varselect-)\n  - [VarSlider](#varslider-)\n  - [VarString](#varstring-)\n  - [VarToggle](#vartoggle-)\n  - [VarXY](#varxy-)\n- [Theme customization](#theme-customization)\n- [Custom input components](#custom-input-components)\n\n## Installation\n\nInstall `react-var-ui` with either npm or yarn:\n\n```\nyarn add react-var-ui\n# or\nnpm install react-var-ui\n```\n\nThen include the CSS with:\n\n```css\n/* In your CSS/SCSS file: */\n@import 'react-var-ui/index.css';\n```\n\nor:\n\n```js\n// In your JS/TS file (assuming your bundler supports loading CSS files):\nimport 'react-var-ui/index.css';\n```\n\n## Example usage\n\n```jsx\nconst [values, setValues] = React.useState({\n  toggle: true,\n  color: '#FF0000',\n  select: 1,\n  slider: 0.4,\n  xy: [0, 0.2],\n  string: 'Hello world!',\n});\n\nreturn (\n  \u003cVarUI onChange={setValues} values={values}\u003e\n    \u003cVarCategory label=\"Example\"\u003e\n      \u003cVarColor path=\"color\" label=\"Color\" /\u003e\n      \u003cVarToggle path=\"toggle\" label=\"Toggle\" /\u003e\n      \u003cVarSelect\n        path=\"select\"\n        label=\"Select\"\n        options={[\n          { key: 0, label: 'Zero' },\n          { key: 1, label: 'One' },\n        ]}\n      /\u003e\n      \u003cVarSlider\n        label=\"VarSlider\"\n        path=\"slider\"\n        min={0.2}\n        max={0.8}\n        step={0.1}\n      /\u003e\n      \u003cVarString label=\"VarString\" path=\"string\" /\u003e\n      \u003cVarXY label=\"VarXY\" path=\"xy\" /\u003e\n      \u003cVarButton buttonLabel=\"VarButton\" onClick={() =\u003e alert('clicked!')} /\u003e\n    \u003c/VarCategory\u003e\n  \u003c/VarUI\u003e\n);\n```\n\n## Testing\n\nreact-var-ui uses jest for automated unit tests and storybook for manually testing the UI.\n\nYou can run unit tests after installing by running:\n\n    yarn test\n\nStorybook can be ran with:\n\n    yarn storybook\n\nTo run the example app, you first need to start the project with:\n\n    yarn start\n\nAnd then enter the example directory and start the app:\n\n    cd ./example\n    yarn start\n\n(make sure to run `yarn install` before.)\n\n## Utility components\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarUI /\u0026gt;\u003c/h3\u003e\n\nThis is the main component which provides a Context for other components. It is not required to use this component - other components accept `onChange` and `value` properties which provide a similar functionality.\n\n#### Required properties\n\n| Property      | Description                                                         | Type                                  |\n| ------------- | ------------------------------------------------------------------- | ------------------------------------- |\n| values        | A JavaScript object or array to be mutated by the input components. | object                                |\n| onChange      | The function to be called with the entire changed object.           | (values: object) =\u003e void              |\n| onChangeValue | The function to be called when one value is changed.                | (path: string, newValue: any) =\u003e void |\n\n#### Optional properties\n\n| Property  | Description                                    | Type   |\n| --------- | ---------------------------------------------- | ------ |\n| className | Additional class names for the wrapper object. | string |\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarCategory /\u0026gt;\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mat-sz/react-var-ui/main/screenshots/VarCategory.png\" alt=\"VarCategory screenshot\"\u003e\n\u003c/p\u003e\n\nCategory component for grouping inputs.\n\n#### Required properties\n\n| Property | Description     | Type      |\n| -------- | --------------- | --------- |\n| label    | Category label. | ReactNode |\n\n#### Optional properties\n\n| Property    | Description                                         | Type    |\n| ----------- | --------------------------------------------------- | ------- |\n| className   | Additional class names on the wrapping div element. | string  |\n| collapsible | Should display the Collapse/Expand button.          | boolean |\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarArray /\u0026gt;\u003c/h3\u003e\n\nRenders an array value as a list of elements.\n\n#### Optional properties\n\n| Property  | Description                                             | Type                                                              |\n| --------- | ------------------------------------------------------- | ----------------------------------------------------------------- |\n| className | Additional class names on the wrapping div element.     | string                                                            |\n| disabled  | Should the component and its children be disabled.      | boolean                                                           |\n| children  | Renders children with the array element as its context. | ReactNode \\| (element: T, index: number, array: T[]) =\u003e ReactNode |\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarScope /\u0026gt;\u003c/h3\u003e\n\nCreates a context with a certain path as base.\n\n#### Optional properties\n\n| Property | Description                   | Type   |\n| -------- | ----------------------------- | ------ |\n| path     | Path to use as the base path. | string |\n\n#### Examples\n\nWith ReactNode children:\n\n```tsx\n\u003cVarUI values={{ test: [{ prop: 'a' }, { prop: 'b' }, { prop: 'c' }] }}\u003e\n  \u003cVarArray path=\"test\"\u003e\n    \u003cVarInput path=\"prop\" label=\"Example\" /\u003e\n  \u003c/VarArray\u003e\n\u003c/VarUI\u003e\n```\n\nWith function:\n\n```tsx\n\u003cVarUI values={{ test: [{ prop: 'a' }, { prop: 'b' }, { prop: 'c' }] }}\u003e\n  \u003cVarArray path=\"test\"\u003e\n    {(element, index) =\u003e \u003cVarInput path=\"prop\" label={`Element: ${index}`} /\u003e}\n  \u003c/VarArray\u003e\n\u003c/VarUI\u003e\n```\n\n## Input components\n\n### Base properties\n\nMost input components accept the following base properties.\n\nDoes not apply to `\u003cVarButton /\u003e`.\n\n#### Optional properties\n\n_T is component's value type._\n\n| Property     | Description                                                                                                     | Type               |\n| ------------ | --------------------------------------------------------------------------------------------------------------- | ------------------ |\n| label        | Label to be shown left to the input.                                                                            | ReactNode          |\n| className    | Additional class names on the wrapping div element.                                                             | string             |\n| path         | Variable path in the data object.                                                                               | string             |\n| value        | Current value (only used if context and path aren't available).\u003cbr\u003eIn most cases you aren't going to need this. | T                  |\n| defaultValue | Default value for components that support resetting (on double click for example).                              | T                  |\n| disabled     | Should the component be disabled.                                                                               | boolean            |\n| readOnly     | Should the component be read-only.                                                                              | boolean            |\n| onChange     | On change event, called with the new value if provided.\u003cbr\u003eIn most cases you aren't going to need this.         | (value: T) =\u003e void |\n| children     | Children. Only rendered when provided directly to the VarBase component.                                        | ReactNode          |\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarAngle /\u0026gt;\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mat-sz/react-var-ui/main/screenshots/VarAngle.png\" alt=\"VarAngle screenshot\"\u003e\n\u003c/p\u003e\n\nAngle picker component. Accepts and provides numbers (radians).\n\n_T = number_ (rad)\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarBase /\u0026gt;\u003c/h3\u003e\n\nBase VarUI input component. Doesn't do anything besides displaying the label.\n\nUsed to construct other components from.\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarButton /\u0026gt;\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mat-sz/react-var-ui/main/screenshots/VarButton.png\" alt=\"VarButton screenshot\"\u003e\n\u003c/p\u003e\n\nButton component.\n\n**Does not accept any of the base component properties.**\n\n#### Required properties\n\n| Property    | Description     | Type      |\n| ----------- | --------------- | --------- |\n| buttonLabel | Category label. | ReactNode |\n\n#### Optional properties\n\n| Property | Description                        | Type       |\n| -------- | ---------------------------------- | ---------- |\n| onClick  | Called when the button is clicked. | () =\u003e void |\n| disabled | Should the component be disabled.  | boolean    |\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarColor /\u0026gt;\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mat-sz/react-var-ui/main/screenshots/VarColor.png\" alt=\"VarColor screenshot\"\u003e\n\u003c/p\u003e\n\nColor picker component. Returns and accepts values in form of hex color strings.\n\nUses [@uiw/react-color-sketch](https://uiwjs.github.io/react-color/#/sketch) to render the color picker.\n\n_T = string_ (#XXXXXX)\n\n#### Optional properties\n\n| Property | Description                                                                                                                                       | Type    |\n| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |\n| alpha    | Should allow picking alpha values?\u003cbr\u003eIf true, the result hex code will contain extra two characters representing the alpha value, from 00 to FF. | boolean |\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarDisplay /\u0026gt;\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mat-sz/react-var-ui/main/screenshots/VarDisplay.png\" alt=\"VarDisplay screenshot\"\u003e\n\u003c/p\u003e\n\nA simple component that displays a string or a numeric value.\n\n**Only accepts path and value. Does not change any values.**\n\n_T = string | number_\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarFile /\u0026gt;\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mat-sz/react-var-ui/main/screenshots/VarFile.png\" alt=\"VarFile screenshot\"\u003e\n\u003c/p\u003e\n\nA simple file input component. Accepts and provides File instances.\n\n_T = File_\n\n#### Optional properties\n\n| Property        | Description                                                                | Type    |\n| --------------- | -------------------------------------------------------------------------- | ------- |\n| accept          | List of accepted file types.                                               | string  |\n| displayMetadata | Whether file information should be displayed in the field. (default: true) | boolean |\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarImage /\u0026gt;\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mat-sz/react-var-ui/main/screenshots/VarImage.png\" alt=\"VarImage screenshot\"\u003e\n\u003c/p\u003e\n\nA simple image input component. Accepts and provides blob/data URLs.\n\n_T = string_\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarMedia /\u0026gt;\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mat-sz/react-var-ui/main/screenshots/VarMedia.png\" alt=\"VarMedia screenshot\"\u003e\n\u003c/p\u003e\n\nMedia (audio/video/image) input component. Accepts and provides a blob URL.\n\nIf acceptImage, acceptAudio and acceptVideo are all false, the component will accept all 3.\n\n_T = string_\n\n#### Optional properties\n\n| Property    | Description                                         | Type    |\n| ----------- | --------------------------------------------------- | ------- |\n| acceptImage | Whether the component should accept image/\\* files. | boolean |\n| acceptAudio | Whether the component should accept audio/\\* files. | boolean |\n| acceptVideo | Whether the component should accept video/\\* files. | boolean |\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarNumber /\u0026gt;\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mat-sz/react-var-ui/main/screenshots/VarNumber.png\" alt=\"VarNumber screenshot\"\u003e\n\u003c/p\u003e\n\nInteger/float number component. Accepts and provides numbers.\n\n_T = number_\n\n#### Optional properties\n\n| Property    | Description                                                                | Type    |\n| ----------- | -------------------------------------------------------------------------- | ------- |\n| min         | Minimum value.                                                             | number  |\n| max         | Maximum value.                                                             | number  |\n| step        | Step.                                                                      | number  |\n| integer     | Should the end result be rounded to an integer value.                      | boolean |\n| showInput   | If true will display an editable input, otherwise shows a read only value. | boolean |\n| showButtons | If true will display buttons that increase and decrease the value by step. | boolean |\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarSelect /\u0026gt;\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mat-sz/react-var-ui/main/screenshots/VarSelect.png\" alt=\"VarSelect screenshot\"\u003e\n\u003c/p\u003e\n\nSelect component. Returns and accepts either `value` from option object or `key` when `value` is not provided.\n\n_T = any_\n\n#### Required properties\n\n| Property | Description              | Type               |\n| -------- | ------------------------ | ------------------ |\n| options  | Options to be displayed. | IVarSelectOption[] |\n\n#### Interface: `IVarSelectOption`\n\n**Required:**\n\n| Property | Description                                                         | Type      |\n| -------- | ------------------------------------------------------------------- | --------- |\n| key      | Key for the option. Also used as value if `value` is not specified. | ReactText |\n| label    | Option label.                                                       | string    |\n\n**Optional:**\n\n| Property | Description                                                                                                              | Type |\n| -------- | ------------------------------------------------------------------------------------------------------------------------ | ---- |\n| value    | Option value. Key will be used if not specified.\u003cbr\u003e**Note: Will be serialized to JSON and deserialized when selected.** | any  |\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarSlider /\u0026gt;\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mat-sz/react-var-ui/main/screenshots/VarSlider.png\" alt=\"VarSlider screenshot\"\u003e\n\u003c/p\u003e\n\nInteger/float slider component. Accepts and provides numbers.\n\n_T = number_\n\n#### Required properties\n\n| Property | Description    | Type   |\n| -------- | -------------- | ------ |\n| min      | Minimum value. | number |\n| max      | Maximum value. | number |\n| step     | Step.          | number |\n\n#### Optional properties\n\n| Property    | Description                                                                | Type    |\n| ----------- | -------------------------------------------------------------------------- | ------- |\n| integer     | Should the end result be rounded to an integer value.                      | boolean |\n| showInput   | If true will display an editable input, otherwise shows a read only value. | boolean |\n| showButtons | If true will display buttons that increase and decrease the value by step. | boolean |\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarString /\u0026gt;\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mat-sz/react-var-ui/main/screenshots/VarString.png\" alt=\"VarString screenshot\"\u003e\n\u003c/p\u003e\n\nString input component. Accepts and provides a string value.\n\n_T = string_\n\n#### Optional properties\n\n| Property  | Description                     | Type    |\n| --------- | ------------------------------- | ------- |\n| maxLength | Maximum length of the text.     | number  |\n| multiline | Should the field be a textarea? | boolean |\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarToggle /\u0026gt;\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mat-sz/react-var-ui/main/screenshots/VarToggle.png\" alt=\"VarToggle screenshot\"\u003e\n\u003c/p\u003e\n\nCheckbox/toggle component. Accepts and returns a boolean (true/false).\n\n_T = boolean_\n\n\u003ch3 align=\"center\"\u003e\u0026lt;VarXY /\u0026gt;\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mat-sz/react-var-ui/main/screenshots/VarXY.png\" alt=\"VarXY screenshot\"\u003e\n\u003c/p\u003e\n\nXY offset picker. Accepts and provides an array in form of [x, y].\n\n_T = [number (x), number (y)]_\n\n#### Optional properties\n\n| Property | Description    | Type                     |\n| -------- | -------------- | ------------------------ |\n| min      | Minimum value. | [number (x), number (y)] |\n| max      | Maximum value. | [number (x), number (y)] |\n| step     | Step.          | [number (x), number (y)] |\n\n## Theme customization\n\nThe colors can be customized as such (provided are default values):\n\n```css\n.react-var-ui {\n  /* Foreground color, used for text. */\n  --react-var-ui-foreground-color: #ddd;\n\n  /* Background color, used for category header backgrounds. */\n  --react-var-ui-background-color: #11111a;\n\n  /* Accent color, used for active parts of sliders, toggles and XY. */\n  --react-var-ui-accent-color: #77f;\n\n  /* Input background color. */\n  --react-var-ui-input-background-color: #353542;\n\n  /* Input background color (when hovered). */\n  --react-var-ui-input-background-hover-color: #424253;\n\n  /* Input background color (when pressed). Only applies to buttons. */\n  --react-var-ui-input-background-pressed-color: #2b2b37;\n\n  /* Label background color. */\n  --react-var-ui-label-background-normal-color: #22222a;\n\n  /* Label background color (when hovered). */\n  --react-var-ui-label-background-hover-color: #2a2a33;\n\n  /* Label border color. */\n  --react-var-ui-label-border-color: #33333a;\n}\n```\n\n## Custom input components\n\nreact-var-ui provides a `\u003cVarBase /\u003e` component and a `useVarUIValue` hook designed to facilitate creation of custom components.\n\n### Example usage\n\n```tsx\nimport React from 'react';\nimport { useVarUIValue, IVarBaseInputProps, VarBase } from 'react-var-ui';\n\n// Please specify the \u003cT\u003e.\nexport interface IVarCustomProps extends IVarBaseInputProps\u003cstring\u003e {}\n\n/**\n * Custom input component. In this example, it's a simple text input.\n */\nexport const VarCustom = ({\n  label,\n  path,\n  value,\n  onChange,\n  disabled,\n  className,\n}: IVarCustomProps): JSX.Element =\u003e {\n  /**\n   * currentValue will contain the current value from the value object\n   * (at a given path) or value from properties if that's not available.\n   *\n   * setCurrentValue will set the value onto a given path in the object\n   * and call onChange if available.\n   *\n   * All arguments are optional, path/object-based value changes take\n   * precedence.\n   */\n  const [currentValue, setCurrentValue] = useVarUIValue(path, value, onChange);\n\n  /**\n   * We're wrapping our component in VarBase which provides the default\n   * label.\n   *\n   * It is necessary to wrap what should appear on the right in a \u003cspan\u003e.\n   * If this behavior is undesired, a \u003cdiv\u003e with grid-column: 1 / 3; can\n   * be used.\n   */\n  return (\n    \u003cVarBase label={label} disabled={disabled} className={className}\u003e\n      \u003cspan\u003e\n        \u003cinput\n          type=\"text\"\n          maxLength={maxLength}\n          value={currentValue}\n          onChange={e =\u003e setCurrentValue(e.target.value)}\n        /\u003e\n      \u003c/span\u003e\n    \u003c/VarBase\u003e\n  );\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmat-sz%2Freact-var-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmat-sz%2Freact-var-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmat-sz%2Freact-var-ui/lists"}