Inline editing in Meteor With ReactJS


I can’t find any solution how to implement inline editing in Meteor with ReactJS.


Inline editing as in? It would help to see examples


In content that display on the page

see this the following links

It is working with blaze not reactjs


you will need to find an editable react component


You can use this package

Use react-meteor-data’s createContainer to load the values from the db, pass the values to the state with a lifecycle method such as componentWillReceiveProps then RIEK provides callbacks change and afterFinish
Call your meteor method to update the db in one of these.


Instead of meteor package, you can use and npm package.

There are some cool packages for react.

You can check it is purely for react.

There is also this package it is a react wrapper for


Here’s my take for a click-to-edit React component wrapping RIEK.
It expects to receive a document, the name of the field to edit (can accept nested fields using dot notation), and the Meteor Method to call to update the document, as well as the input type and whether a value is required. This example only shows textfield and textarea types.

import React from 'react';
import PropTypes from 'prop-types';
import { Meteor } from 'meteor/meteor';
import { RIEInput, RIETextArea } from 'riek'
import _ from 'lodash';

export default class EditInline extends React.Component {
  constructor (props) {
    this.state = {};
    this.state[props.field] = _.get(props.doc, props.field);
    this.isStringAcceptable = this.isStringAcceptable.bind(this);
    this.updateDoc = this.updateDoc.bind(this);
  isStringAcceptable(string) {
    return (!this.props.requied || string.length >= 1);
  updateDoc(newState) {
  	const { updateMethod, doc, field } = this.props;
  	_.set(doc, field, newState[field].trim());, doc, (error, result) => { 
      if (error) {
  render() {
    const { doc, field, inputType, required } = this.props;

    const rieProps = {
      value: _.get(doc, field),
      change: this.updateDoc,
      propName: field,
      className: this.state.highlight ? "riek editable" : "riek",
      classLoading: "loading",
      classInvalid: "invalid",
      validate: this.isStringAcceptable;
    if (inputType=='textfield') return <RIEInput {...rieProps} />;
    if (inputType=='textarea') return <RIETextArea {...rieProps} />;

EditInline.propTypes = {
  doc: PropTypes.object.isRequired,
  field: PropTypes.string.isRequired,
  updateMethod: PropTypes.string.isRequired,
  inputType: PropTypes.string.isRequired,

EditInline.defaultProps = {
  required: true,

EditInline.types = {
	textfield: 'textfield',
	textarea: 'textarea',