Usage with React

[rungwe]

I am struggling to figure out how this plugin could be used in ReactJs framework, if it is compatible please could you share something like an example?

[lukeed]

Hey, Yes there are two ways:

1. You can just initialize it inside a component that wont update:

   class Slider extends React.Component {
   componentDidMount() {
     this.slider = new Bee3D(this.ref, {});
   }
   
   shouldComponentUpdate() {
     return false;
   }
   
   render() {
     return <div>slider goes here</div>
   }
   }

2. You could also slice up the markup into more controlled components. This would take a little more time but be more flexible & maybe worth it in the long run?

   function Slide(props) {
   return (
     <div className="bee3d--slide">...</div>
   )
   }
   
   class Slider extends React.Component {
   componentDidMount() {
     this.slider = new Bee3D(this.ref, {});
   }
   
   render() {
     return (
       <div ref="" className="bee3d--parent">
         { this.props.data.map(Slide) }
         { this.props.navigation ? Navigation : '' }
       </div>
     )
   }
   }

[rungwe]

What would the import statement look like, I have something like this import Bee3D from '.lib/bee3D.js' which doesn't seem to be working, I get this error Uncaught TypeError: _bee3D2.default is not a constructor

[lukeed]

Depends on your build tool. Looks like you're probably using Rollup, in which case, you need the rollup-plugin-commonjs helper.

Webpack should handle that just fine because it handles CommonJS modules by default.

If you're using Browserify, you have to use require() instead.

[lukeed]

Closing for inactivity, but feel free to follow up with any additional questions. Happy to help!