https://github.com/itsjonq/controls

🎛 A control panel for developing/prototyping React UI
https://github.com/itsjonq/controls

configuration control control-panel development knobs prototyping rapid-development rapid-prototyping react ui

Last synced: 3 months ago
JSON representation

🎛 A control panel for developing/prototyping React UI

• Host: GitHub
• URL: https://github.com/itsjonq/controls
• Owner: ItsJonQ
• License: mit
• Created: 2019-12-07T17:03:42.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-13T14:24:54.000Z (about 2 years ago)
• Last Synced: 2024-11-09T22:04:33.956Z (3 months ago)
• Topics: configuration, control, control-panel, development, knobs, prototyping, rapid-development, rapid-prototyping, react, ui
• Language: JavaScript
• Homepage: https://codesandbox.io/s/controls-demo-jjw83
• Size: 1.82 MB
• Stars: 11
• Watchers: 1
• Forks: 0
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🎛 Controls

[![Build Status](https://travis-ci.org/ItsJonQ/controls.svg?branch=master)](https://travis-ci.org/ItsJonQ/controls)

> A control panel to develop and prototype React UI

-   [Installation](#installation)

-   [Usage](#usage)

    -   [Fields](#fields)

    -   ["Controlled" Fields](#controlled-fields)

## Installation

```

npm install @itsjonq/controls

```

## Usage

```jsx

import React from 'react';

import { useControls, Controls } from '@itsjonq/controls';

function Example() {

	const { text, number } = useControls();

	const title = text('Title', 'My Title');

	const amount = number('Amount', 10, { min: 0, max: 50 });

	return (

		


			

			
{title}

			
{amount}

		

	);

}

```


### Fields

```jsx

import React from 'react';

import { useControls, Controls } from '@itsjonq/controls';

function Example() {

	const {

		// Fields

		boolean,

		color,

		date,

		number,

		select,

		text,

		textarea,

		// All attributes

		attributes,

	} = useControls();

	boolean('checked', true);

	color('mainColor', 'red');

	date('publishDate', 'December 8, 2019');

	number('amount', 10, { min: 0, max: 50 });

	select(

		'status',

		{

			Published: 'published',

			Draft: 'draft',

			Private: 'private',

		},

		'published',

	);

	text('title', 'My Title');

	textarea('description', 'Words...');

	// The names of the attributes registered with the fields

	const {

		checked,

		mainColor,

		publishDate,

		amount,

		status,

		title,

		description,

	} = attributes;

	return 
...
;

}

```


### "Controlled" Fields

To manually update a field (or fields), use the `updateField` or `updateFields` function.

```jsx

import React from 'react';

import {

	useControls,

	Controls,

	updateField,

	updateFields,

} from '@itsjonq/controls';

function Example() {

	const { text } = useControls();

	text('title', 'My Title');

	text('description', 'My Description');

	text('caption', 'My Caption');

	// The names of the attributes registered with the fields

	const { title, description, caption } = attributes;

	const handleOnManualUpdateFields = () => {

		// Update a single field

		updateField('title', 'New Title');

		// Update multiple fields

		updateFields({

			description: 'New Description',

			caption: 'New Caption',

		});

	};

	return 
...
;

}

```