@itsjonq/controls

🎛 Controls

A control panel to develop and prototype React UI

• Installation
• Usage
  • Fields
  • "Controlled" Fields

Installation

npm install @itsjonq/controls

Usage

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 (
		<div>
			<Controls />
			<h2>{title}</h2>
			<p>{amount}</p>
		</div>
	);
}

Fields

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 <div>...</div>;
}

"Controlled" Fields

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

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 <div>...</div>;
}