Skip to content
forked from kaivi/riek

An set of common form components for React, editable in-line

License

Notifications You must be signed in to change notification settings

chilimatic/riek

 
 

Repository files navigation

This is a fork because I needed some fixes

  • The last update was 7 months
  • There is no testing whatsoever
  • There is no linting whatsoever (that's more taste)
  • There are obvious bugs that are not getting fixed :)

Build Status

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

#Installation npm install rieke --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
  • 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.

###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.

  1. Clone this repo locally, run npm install
  2. Make your changes
  3. Do npm run build to compile the lib and demo
  4. Open index.html and check if it works
  5. ???
  6. Submit a pull request

About

An set of common form components for React, editable in-line

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 99.0%
  • HTML 1.0%