Inline editing in Meteor With ReactJS

help
1

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

2

Inline editing as in? It would help to see examples

3

In content that display on the page

see this the following links

It is working with blaze not reactjs

4

you will need to find an editable react component

https://www.google.com/search?q=react+editable+component&oq=react+editable+component&aqs=chrome..69i57.4608j0j7&sourceid=chrome&ie=UTF-8

5

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.

6

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

There are some cool packages for react.

You can check https://draftjs.org/ it is purely for react.

There is also this package https://github.com/wangzuo/react-medium-editor it is a react wrapper for https://github.com/yabwe/medium-editor

7

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) {
    super(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());
  	
    Meteor.call(updateMethod, doc, (error, result) => { 
      if (error) {
      	alert(error.reason);
      } 
    });
  }
  
  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',
}