Using React Components In Backdraft

We've mentioned in several places that third-party components can be included in Backdraft components. We've just added a little Backdraft component ReactComponent to the bd-widgets project that demonstrates how to do this.

Here is an example Backdraft component that uses ReactComponent to include a react-select component

class DemoContainerForReactComponent extends Component {
	onChange(e){
		console.log("react-select onChange:", e.value);
		this.theSelect.props = {value: e.value};
	}

	_elements(){
        // in the code below...
        // ReactComponent is the new Backdraft component that wraps a React component
        // Select is the react-select class

		return e("div", e(ReactComponent, {
			component: Select,
			props: {
				onChange: this.onChange.bind(this),
				options: [
					{value: 'chocolate', label: 'Chocolate'},
					{value: 'strawberry', label: 'Strawberry'},
					{value: 'vanilla', label: 'Vanilla'}
				]
			},
			[e.attach]: "theSelect"
		}));
	}
}

For more information take a look at the ReacComponent preliminary docs