React state-control

A bunch of lightweight components for updating model stored in React’s stateful components for fast prototyping. Complete library weights 4.4 KB gzipped with dependencies. It fits strings, numbers (automatically detected) as <Input />, booleans as <Check /> and sets of values as <Radio />.

This package also provides a component for presets of values (<SettersBlock />) and a helper to simplify your source code (<Connector />).

Demo

You can see a live demo at https://bouvens.github.io/state-control/ A source code of this demo is available in the repository.

Complete guide in 5 minutes

Quick start in 3 steps

1st. Install the package to your project:

npm i state-control

Include required components and helpers to jsx:

import { Check, Connector, Input, Radio, SettersBlock, selectAll } from 'state-control'

2nd. You may also need an object of identifiers:

const IDS = {
  firstStateParameter: 'firstStateParameter',
  secondStateParameter: 'secondStateParameter',
}

Use identifiers as names in state and add a changeHandler(name, value):

class Demo extends Component {
  state = {
    [IDS.firstStateParameter] = 1,
    [IDS.secondStateParameter] = 'second',
  }

  changeHandler = (name, value) => {
    // input value may be proceded here
    this.setState({ [name]: value })
  }

  ...
}

3rd. All together now. Use identifiers as id property of a component matching type you want (Use <Input /> for strings an numbers). ID connects it to the corresponding property of state:

render () {
  return (
    <Input
      state={this.state}
      onChange={this.changeHandler}
      id={IDS.firstStateParameter}
      label="First state parameter"
    />
  )
}

That's it!

<Connector />

You can use Connector component for passing common props to all of its children:

<Connector
  state={this.state}
  onChange={this.changeHandler}
>
  <Input
    id={IDS.firstStateParameter}
    label={'First state parameter'}
  />
  <Input
    id={IDS.secondStateParameter}
    label={'Second state parameter'}
  />
</Connector>

<SettersBlock />

This component generates elements (looks like link with a dashed underline) for activation of presets:

<SettersBlock
  setters={SETTERS}
  setHandler={this.changeHandler}
/>

It uses an array of presets:

const SETTERS = [
  Default: {
    [IDS.firstStateParameter]: 1,
    [IDS.secondStateParameter]: 'second',
  },
  'This text will be used as a label': {
    [IDS.firstStateParameter]: 'first',
    [IDS.secondStateParameter]: 2,
  },
]

It also accepts another shape of presets:

const SETTERS = [
  {
    text: 'Default',
    params: {
      [IDS.firstStateParameter]: 1,
      [IDS.secondStateParameter]: 'second',
    },
  },
  {
    text: 'This text will be used as a label',
    params: {
      [IDS.firstStateParameter]: 'first',
      [IDS.secondStateParameter]: 2,
    },
  },
]

It's a good idea to use one of presets as a default state:

class Demo extends Component {
  state = SETTERS.Default

  // For another shape there will be
  // state = SETTERS[0].params

  ...
}

Properties

Common for control components

id: PropTypes.string.isRequired

Name of property of state and identifier for element.

state: PropTypes.object

State object that we want to change.

label: PropTypes.string

Label for an element. It may be a node in <Radio />.

value: PropTypes.oneOfType(string, number, bool)

Value will be used instead of state[id] if passed.

readOnly: PropTypes.bool

Sets read only of control.

className: PropTypes.string

Classname passed to wrapper div tag.

style: PropTypes.object

Overrides default styles or resets it on style={{}}.

onClick: PropTypes.func

Handler for onClick event.

onFocus: PropTypes.func

Handler for an onFocus event. The handler will be called with an input component as an argument.

Example for selecting all on focus:

selectAll = (control) => {
  control.setSelectionRange(0, control.value.length)
}

// or just include and use predefined handler
import { selectAll } from 'state-control'
<Input
  onFocus={selectAll}
  ...
/>

<Input />

suffix: PropTypes.string

Text for showing after input field.

multiLine: PropTypes.bool

Flag changes input tag to textarea.

defaultNum: PropTypes.number

Number replaces empty value if passed. Use it if you need default numeric values.

decimalMark: PropTypes.string

Symbol for using as decimal mark.

thousandsSeparator: PropTypes.oneOfType([PropTypes.string, PropTypes.array])

Symbol or array of symbols for using as thousands separators for removing.

alternateDecimalMark: PropTypes.oneOfType([PropTypes.string, PropTypes.array])

Symbol or array of symbols for replacing to decimal mark after removing all thousand separator symbols.

numberColor: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])

String for background color or just flag for coloring fields where numbers had been parsed. It makes an implicit explicit.

trimOnPaste: PropTypes.bool

Flag turns on trimming spaces, tabs and newline characters on paste. It also removes trailing zeros (after decimal separator) on numbers pasting. True by default.

All other props will be passed to an inner element, and specifically to <input />. So type may be passed for entering only integer numbers:

<Input
  type="number"
  ...
/>

<Check />

No special properties.

<Radio />

values: PropTypes.array

Array of available values.

suffix: PropTypes.oneOfType(string, node)

Text for showing after radio buttons.

How to run locally

Run in bash:

git clone [email protected]:bouvens/state-control.git
cd state-control
yarn install
yarn run start

Then open http://localhost:3000

For sure you can use npm instead of yarn. More scripts may be found in package.json.

More examples of state-control

• Zero Packer
• Red Squares
• Griffeath’s machine
• RGB Filter