How to use with ReactJS ?

[sovanjana]

This library is really great but surprisingly I have not found a single solution about how it works with react js. Need help.

[vincolus]

I found this thread on stackoverflow which had an answer: https://stackoverflow.com/questions/45216214/how-to-use-slideout-js-using-reactjs-and-webpack?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

This is what I did, but it did not work:

import Slideout from 'slideout';

  [...] 

this.slideout = new Slideout({
    'panel': document.getElementById('panel'),
    'menu': document.getElementById('menu'),
    'padding': 256,
    'tolerance': 70
});

The 'menu'-propery is null after (or more while) it is initialized.

[Pushplaybang]

@vincelord - theres good documentation on integrating third party libs, Have a look at: https://reactjs.org/docs/integrating-with-other-libraries.html

[wl05]

you can do this,it works with react hooks

useEffect(() => {
        const slideout = new Slideout({
            'panel': navRef.current,
            'menu': mainRef.current,
            'padding': 256,
            'tolerance': 70
        });
        // Toggle button
        searchRef.current.click(function () {
            slideout.toggle()
        });
    }, [])