🎛 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>;
}