{"id":20196824,"url":"https://github.com/itsjonq/controls","last_synced_at":"2025-04-10T10:44:11.981Z","repository":{"id":36469188,"uuid":"226547601","full_name":"ItsJonQ/controls","owner":"ItsJonQ","description":"🎛 A control panel for developing/prototyping React UI","archived":false,"fork":false,"pushed_at":"2022-12-13T14:24:54.000Z","size":1905,"stargazers_count":11,"open_issues_count":26,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-29T17:01:28.364Z","etag":null,"topics":["configuration","control","control-panel","development","knobs","prototyping","rapid-development","rapid-prototyping","react","ui"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/controls-demo-jjw83","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ItsJonQ.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}},"created_at":"2019-12-07T17:03:42.000Z","updated_at":"2021-07-22T00:42:09.000Z","dependencies_parsed_at":"2023-01-17T02:01:00.321Z","dependency_job_id":null,"html_url":"https://github.com/ItsJonQ/controls","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fcontrols","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fcontrols/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fcontrols/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fcontrols/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ItsJonQ","download_url":"https://codeload.github.com/ItsJonQ/controls/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248027395,"owners_count":21035594,"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":["configuration","control","control-panel","development","knobs","prototyping","rapid-development","rapid-prototyping","react","ui"],"created_at":"2024-11-14T04:26:12.768Z","updated_at":"2025-04-10T10:44:11.955Z","avatar_url":"https://github.com/ItsJonQ.png","language":"JavaScript","readme":"# 🎛 Controls\n\n[![Build Status](https://travis-ci.org/ItsJonQ/controls.svg?branch=master)](https://travis-ci.org/ItsJonQ/controls)\n\n\u003e A control panel to develop and prototype React UI\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n-   [Installation](#installation)\n-   [Usage](#usage)\n    -   [Fields](#fields)\n    -   [\"Controlled\" Fields](#controlled-fields)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n\n```\nnpm install @itsjonq/controls\n```\n\n## Usage\n\n```jsx\nimport React from 'react';\nimport { useControls, Controls } from '@itsjonq/controls';\n\nfunction Example() {\n\tconst { text, number } = useControls();\n\tconst title = text('Title', 'My Title');\n\tconst amount = number('Amount', 10, { min: 0, max: 50 });\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cControls /\u003e\n\t\t\t\u003ch2\u003e{title}\u003c/h2\u003e\n\t\t\t\u003cp\u003e{amount}\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n### Fields\n\n```jsx\nimport React from 'react';\nimport { useControls, Controls } from '@itsjonq/controls';\n\nfunction Example() {\n\tconst {\n\t\t// Fields\n\t\tboolean,\n\t\tcolor,\n\t\tdate,\n\t\tnumber,\n\t\tselect,\n\t\ttext,\n\t\ttextarea,\n\t\t// All attributes\n\t\tattributes,\n\t} = useControls();\n\n\tboolean('checked', true);\n\tcolor('mainColor', 'red');\n\tdate('publishDate', 'December 8, 2019');\n\tnumber('amount', 10, { min: 0, max: 50 });\n\tselect(\n\t\t'status',\n\t\t{\n\t\t\tPublished: 'published',\n\t\t\tDraft: 'draft',\n\t\t\tPrivate: 'private',\n\t\t},\n\t\t'published',\n\t);\n\ttext('title', 'My Title');\n\ttextarea('description', 'Words...');\n\n\t// The names of the attributes registered with the fields\n\tconst {\n\t\tchecked,\n\t\tmainColor,\n\t\tpublishDate,\n\t\tamount,\n\t\tstatus,\n\t\ttitle,\n\t\tdescription,\n\t} = attributes;\n\n\treturn \u003cdiv\u003e...\u003c/div\u003e;\n}\n```\n\n### \"Controlled\" Fields\n\nTo manually update a field (or fields), use the `updateField` or `updateFields` function.\n\n```jsx\nimport React from 'react';\nimport {\n\tuseControls,\n\tControls,\n\tupdateField,\n\tupdateFields,\n} from '@itsjonq/controls';\n\nfunction Example() {\n\tconst { text } = useControls();\n\n\ttext('title', 'My Title');\n\ttext('description', 'My Description');\n\ttext('caption', 'My Caption');\n\n\t// The names of the attributes registered with the fields\n\tconst { title, description, caption } = attributes;\n\n\tconst handleOnManualUpdateFields = () =\u003e {\n\t\t// Update a single field\n\t\tupdateField('title', 'New Title');\n\t\t// Update multiple fields\n\t\tupdateFields({\n\t\t\tdescription: 'New Description',\n\t\t\tcaption: 'New Caption',\n\t\t});\n\t};\n\n\treturn \u003cdiv\u003e...\u003c/div\u003e;\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fcontrols","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsjonq%2Fcontrols","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fcontrols/lists"}