react-trix-editor
Version:
A React component for Basecamp's Trix text editor
67 lines (48 loc) • 2.7 kB
Markdown
# react-trix-editor
[](https://badge.fury.io/js/react-trix-editor)
[](https://opensource.org/licenses/mit-license.php)
A React component for [Trix](https://github.com/basecamp/trix).
## Getting Started
Install via npm: `npm install react-trix-editor`.
Import from `react-trix-editor`.
If you would like to use the component without styling, import from `react-trix-editor/ReactTrixEditor`.
## Usage
Example:
```
import ReactTrixEditor from 'react-trix-editor';
class ReactTrixEditorDemo extends Component {
constructor() {
super();
this.onChange = this.onChange.bind(this);
}
state = {
value: ''
}
onChange(value) {
this.setState({
value
});
}
render() {
const testProps = {
onChange: this.onChange,
onEditor(editor) { console.log(`Editor callback: `, editor); },
initialValue: 'Hello World',
placeholder: 'A placeholder shown when the text editor is empty'
};
return <ReactTrixEditor {...testProps} />;
}
}
```
## Props
| Name | Type | Description | Required | Default |
|-----------------|-------------------------|-------------------------------------------------------------|-----------|----------------------------|
| onChange | func | Passes editor's state when input is received | true | |
| onEditor | func | Provides a Trix editor obj on initialisation [(see docs)](https://github.com/basecamp/trix#editing-text-programmatically) | | |
| autofocus | bool | Should the editor have autofocus | | false |
| input | string | A unique ID for the editor | | 'react-trix-editor' |
| placeholder | string | Placeholder for the text editor | | 'Enter text here...' |
| initialValue | string | Text to insert into the text editor on initialisation | | |
## Notes
- `onEditor` passes a Trix editor object that can be used to programmatically change the text editor.
- `input` is a unique ID for a hidden input element used by Trix. You only need to ensure this is unique if you have multiple instances of this component on a single page.