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};
}
bdElements(){
// 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'}
]
},
bdAttach: "theSelect"
}));
}
}
For more information take a look at the ReacComponent preliminary docs
Copyright © 2018, ALTOVISO LLC