Package Exports

riek

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (riek) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Inline Edit Kit

An assortment of common HTML form elements, editable in-line the React way.

Try out the demo and see what it looks like.

Installation

npm install riek --save-dev (--save-dev because you don't usually want to build and pack JS/CSS when in production)

Usage

import { RIEToggle, RIEInput, RIETextArea, RIENumber, RIETags, RIESelect } from 'riek'

See /demo/src/demo.js for examples.

Common props

Required

value: initial prop value
propName: name of the prop to return to the change function
change: function which will receive a plain object with a single key, provided in propName

Optional

validate: validator function, returning a boolean
shouldBlockWhileLoading: disables editing until a new value is confirmed by parent
shouldRemainWhileInvalid: remain in editing mode if validation fails
classLoading: CSS class name to use when loading
classEditing: CSS class name to apply while in editing mode
classInvalid: CSS class name to apply when doValidatoon returned false
className: CSS base class
editProps: Additional props for the editing component. This allows you to, for example, specify a maxLength attribute to control the maximum number of characters in the textarea, or add style.
defaultProps: Additional props for idle component.

Optional hooks

beforeStart: Fires before editing starts
afterStart: Fires after editing starts
beforeFinish: Fires before editing ends, before validations
afterFinish: Fires after editing ends, after validations

Component-specific props

RIENumber

format: custom formatting function, returns formatted string

RIETextArea

rows: rows property on textarea tag while editing
cols: rows property on textarea tag while editing

RIESelect

options: an array of objects containing values and text for select options

<RIESelect ... options={[
  {id: "1", text: "one"},
  {id: "2", text: "two"},
  {id: "3", text: "three"}
]} />

Contributing

The build process does not work with Node v6 at the moment: use Node Version Manager, or just plain Node v5.6.0.

Clone this repo locally, run npm i
Make your changes
Do npm run build to compile the lib and demo
Open index.html and check if it works
???
Submit a pull request