How to use slideout.js using reactjs and webpack

user_8178463 0
Viewed 1084

Slideout.js library demands you to execute it on page load. But I am not able to understand where and how can I write this custom JS code in my react jsx code.

<script>
  var slideout = new Slideout({
    'panel': document.getElementById('panel'),
    'menu': document.getElementById('menu'),
    'padding': 256,
    'tolerance': 70
  });
</script>

As per documentation on https://slideout.js.org I need to write down above code in my html file or JS file. Please tell me how can we write this code in our JSX or react js file.

My code for Header.js is as follows

import React from 'react';
import { Router} from 'react-router'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import slideout from 'slideout';

class Header extends React.Component {

  render() {
    return (
        <div>
            <nav id="menu">
                <header>
                    <h2>Menu</h2>
                </header>
            </nav>

            <main id="panel">
                <header>
                    <h2>Panel</h2>
                </header>
            </main>
        </div>
        );
    }
}

export default Header;
jsx webpack reactjs javascript
3 Answers

React is used for manage VDOM before html document render. Try using ref for control virtual node. `

componentDidMount() {
    this.slideout = new Slideout({
      'panel': this.refs._panel,
      'menu': this.refs._menu,
      'padding': 256,
      'tolerance': 70
    })
  }
  render() {
    return (
      <div>
        <nav ref="_menu">
            <header>
              <h2>Menu</h2>
            </header>
        </nav>
        <main ref="_panel">
            <header>
              <h2>Panel</h2>
            </header>
        </main>
      </div>
    )
  }
user_113291340
Related