@elightup/form NPM

@elightup/form

Common uncontrolled form controls for React

Installing

Clone this repo to a local folder and build it:

git clone git@github.com:elightup/form.git
yarn install
yarn start

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.

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';

clsx

@everything-registry/sub-chunk-286

1.0.3

5 months ago

1.0.0

2 years ago