Draft-js: How to use with react-rails

[meltingice]

We have a Rails 4 project that's currently using react-rails and rails-assets.org to manage front-end dependencies. We don't have any NPM modules.

Anyone have any idea how to use Draft.js in this type of environment? Would be nice to avoid browserify if possible. React and ReactDOM are already present thanks to react-rails.

[hellendag]

cc @zpao @spicyj

[sophiebits]

If you install draft-js from npm, you should be able to use the compiled files from dist/ which are also available here:

https://npmcdn.com/[email protected]/dist/Draft.js
https://npmcdn.com/[email protected]/dist/Draft.min.js
https://npmcdn.com/[email protected]/dist/Draft.css

Make sure you have React, ReactDOM, and Immutable exposed as globals.

[meltingice]

Ah okay, looks like that worked. Thanks!

[Sparadri]

hi guys,

could you please be a bit more explicit :) ?
would really need to use draftJS but cannot find any easy tutorial to get it installed on a rails app.

thanks a lot!

Adrien

[varun-raj]

Should we use browserify for this ? or without it we can implement ?

[zpao]

You can use browserify but that's up to you and your packaging needs. Otherwise as Ben mentioned you can use something like npmcdn to get the dist files with just a <script> tag, just like you would do with any other external resource.

[vpaul08]

Tried using in my rails app with the following code for the react component file. Using react-rails gem as well.

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
import 'draft-js/dist/Draft.css';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = (editorState) => this.setState({editorState});
  }

  state = {
    rootElement: null,
    editorState: EditorState.createEmpty()
  }

  render() {
    return (
      <Editor editorState={this.state.editorState} onChange={this.onChange} />
    );
  }
}

export default MyEditor

and using this to render in rails view:

<%= react_component("MyEditor") %>

Still don't see anything in my view as a result.