Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaivi/riek
An set of common form components for React, editable in-line
https://github.com/kaivi/riek
Last synced: about 2 months ago
JSON representation
An set of common form components for React, editable in-line
- Host: GitHub
- URL: https://github.com/kaivi/riek
- Owner: kaivi
- License: mit
- Created: 2015-10-05T07:24:58.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-12T09:48:58.000Z (over 1 year ago)
- Last Synced: 2024-05-14T10:02:04.290Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.97 MB
- Stars: 364
- Watchers: 17
- Forks: 110
- Open Issues: 47
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Inline Edit Kit
An assortment of common HTML form elements, editable in-line the React way.
Try out [the demo](http://kaivi.github.io/riek/) and see what it looks like.
# Installation
`npm install riek --save-dev`
*or*
`yarn add riek --dev`
*Use `--save-dev` because you don't want to build and pack JS/CSS in production*
# Usage
Import the library:
```javascript
import { RIEToggle, RIEInput, RIETextArea, RIENumber, RIETags, RIESelect } from 'riek'
import _ from 'lodash'
```
Suppose we want to be able to edit title of a `Task` and send changes to server. Here is a `Task` stored flat inside of our parent React component:
```javascript
this.state = {
id: 1,
title: 'Cover with tests',
completed: false
}
```
Now we need a function which will send the single altered `{ key: value }` and upsert local state. You can implement it inside of your flux/redux/mobx store:
```javascript
const httpTaskCallback = (task) => {
request.post(`/api/task/${this.state.id}`)
.send(task)
.end((err, res) => {
if (!err) return this.setState({ ...task })
// Handle HTTP error
})
}
```
Meanwhile, there is a simple Express handler on our API server:
```javascript
app.use('/api/task/:id', async (req, res) => {
// req.body will equal to { title: 'A new title' }
const { id } = req.params
await Task.update({ ...req.body }).where({ id })
res.send('OK')
})
```
Finally, in our `render` method, we add a minimal `RIEInput`:
```javascript
```
...repeat the last step, adding a Riek component for any object property we wish to edit.
Components come unstyled, so take a look at [demo.jsx](https://github.com/kaivi/riek/blob/master/demo/demo.jsx) 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
* **defaultProps**: Additional props for idle component.
#### Customization
* **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 _validate_ 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`.
#### 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](http://www.w3schools.com/tags/tag_option.asp)
```javascript
```
# Contributing
The build process does not work with Node v6 at the moment: use [Node Version Manager](https://github.com/creationix/nvm), or just plain Node v5.6.0.
1. Clone this repo locally, run `npm i`
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. Open JS console in browser, set `localStorage.debug = '*'` to see debug messages, add more if necessary
6. ???
7. Submit a pull request