React Trix Editor

ReactTrixEditorComponent.jsx

class TrixEditor extends React.Component {
    propTypes: {
        value: PropTypes.string,
        onChange: PropTypes.func
    }

    componentDidMount () {

        this.trix = ReactDOM.findDOMNode(this)
        this.changeListener = document.addEventListener(
            'trix-change', this.onChange.bind(this))

        this.trix.editor.insertHTML(this.props.value)

    }

    componentWillDismount () {
        this.changeListener()
    }

    onChange (event) {
        if (event.target === this.trix) {
            this.props.onChange(event)
        }
    }

    render () {
        return (
            <trix-editor {...this.props}></trix-editor>
        )
    }
}

Using.js

<TrixEditor value={this.props.tour_day.description} onChange={this.onTrixChanged} />