Skip to content
/ form Public

Common uncontrolled React form controls for WordPress

Notifications You must be signed in to change notification settings

elightup/form

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

40 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@elightup/form

Common uncontrolled form controls for React

Installing

Clone this repo to a local folder and build it:

git clone [email protected]:elightup/form.git
pnpm install
pnpm start

To start using this package in your project, first make this project as a link, so whenever you update it locally, all local changes will apply to your project. To make it a link, run this command inside the @elightup/form package folder:

pnpm link

Then add @elightup/form to the list of your project's dependencies in the package.json file:

"dependencies": {
	"@elightup/form": "file:../../../../form",
}

Don't forget to change the path to the folder of the @elightup/form repo that you cloned earlier.

This will add @elightup/form to your node_modules folder, however, to make it link to the local folder, run:

pnpm link @elightup/form

Usage

Control

import { Control } from "@elightup/form";

const MyInput = props => (
	<Control {...props}>
		<input type="text" name="name" />
		<div className="my-custom">Some custom text</div>
	</Control>
);

Props:

Name Description
label The label, can be text or HTML. Optional. If empty, then the input will take full width.
id The id attribute for the input, used for the for attribute for the label. Optional.
description The description text. Optional.
required Whether the field is required. If true, then output a red asterisk (*) next to the label. Default false. Optional.
tooltip The tooltip for the field. Optional.
className Additional class name(s) for the control. Optional.

Input

import { Input } from "@elightup/form";

const MyInput = props => <Input {...props} />;

Props:

Inherits all props from Control, and:

Name Description
type The input type. Optional. Default text.
name The name attribute for the input. Optional.
value The default value. Optional.
placeholder The placeholder text. Optional.
onChange The callback for the change event. Optional.

Text

The same as Input with type is set to text.

Select

import { Select } from "@elightup/form";

const MyInput = props => <Select {...props} />;

Props:

Inherits all props from Control, and:

Name Description
name The name attribute for the input. Optional.
value The default value. Optional.
placeholder The placeholder text. Optional.
onChange The callback for the change event. Optional.
options The select options. Required.

options can be defined as:

import { Select } from "@elightup/form";

// Simple value: label pairs.
const options1 = {
	value1: 'Label 1',
	value2: 'Label 2',
};
const Select1 = props => <Select options={ options1 } {...props} />;

// Explicit array of { value, label } pairs.
const options2 = [
	{
		value: 'value1',
		label: 'Label 1',
	},
	{
		value: 'value2',
		label: 'Label 2',
	},
};
const Select2 = props => <Select options={ options2 } {...props} />;

// With <optgroup>
const options3 = [
	{
		value: 'group1',
		label: 'Group 1',
		// Options can be simple value: label pairs.
		options: {
			value1: 'Label 1',
			value2: 'Label 2',
		}
	},
	{
		value: 'group2',
		label: 'Group 2',
		// Options also can be an explicit array of { value, label } pairs.
		options: [
			{
				value: 'value1',
				label: 'Label 1',
			},
			{
				value: 'value2',
				label: 'Label 2',
			},
		],
	},
};
const Select3 = props => <Select options={ options3 } {...props} />;

Styling

@elightup/form does not include any style loading by default. Default stylesheets are provided and can be included in your application if desired.

Webpack

When using webpack and with sass-loader you can simply import the default stylesheet.

import '@elightup/form/style/form.scss';

SASS

When using SASS you can easily import the default styles:

@import '../../path/to/node_modules/@elightup/form/style/form.scss';