how can I use Jquery in reactjs

Question

I'm totally new in reactjs world.I have a navigation bar which is placed in 100px from the top. when i scroll down my page that navigation bar should be sticky on top.

my code of navigation bar class is

export default class NavBar extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    return (
      <div id="stickyheader">
        <Navbar color="light" white expand="md">
          <NavbarBrand href="/">
            <ResizeImage
              src={require('../image/logo.png')}
              alt="logo"
              options={{ width: 10 },{ height: 50 },{ mode: 'pad' }}

            />
          </NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
            <Collapse isOpen={this.state.isOpen} navbar>
              <Nav className="ml-auto" navbar>
                <NavItem>
                  <NavLink href="/components/">HOME</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="#">ALL CARS</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="#">RATES</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="#">ABOUT US</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="#"><FontAwesomeIcon icon="users" />  BECOME A PARTNER</NavLink>
                </NavItem>

              </Nav>
            </Collapse>
        </Navbar>
      </div>

    );
  }
}

jquery code

$(function(){
        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('#stickyheader').offset().top;

        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                        $('#stickyalias').css('display', 'block');
                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                        $('#stickyalias').css('display', 'none');
                }
        });
  });

this jquery code is working fine when I used in html. I guess the problem is to indicate of id="stickyheader" I referred some links but I didn't find proper solution. please guide me to solve this.Thanks for advanced.

One way to acheive is using `ref` but you can use jquery library for it. like `npm i jquery` and then `import $ from 'jquery'` — Revansiddh, Sep 29 '18 at 17:38
@Revansiddh I added use jquery library already. but please give any hint how to use ref insead of id — Arebhy Sridaran, Sep 29 '18 at 17:42
https://reactjs.org/docs/refs-and-the-dom.html. Like `ref={this.myRef}` at div and `this.myRef = React.createRef();` in constructor — Revansiddh, Sep 29 '18 at 18:05
I think you should consider not using jQuery. jQuery will only add extra data overhead of the downloading size of your bundle file when that code, you present, can easily be done by native javascript. But if you don't want to start from scratch, there are a lot of open sourced packages doing this. ex: https://www.npmjs.com/package/react-sticky — J.Lindebro, Sep 30 '18 at 00:24

score 1 · Accepted Answer · answered Sep 29 '18 at 17:58

1

You can init jQuery function after react initial render - just call it from componentDidMount.

answered Sep 29 '18 at 17:58

xadm

8,219
3
14
25

1

please specify how can I do it sir? – Arebhy Sridaran Sep 29 '18 at 18:45
1

https://stackoverflow.com/q/33351288/6124657 - you can place your code inside cDM or call fn - from this moment (time) div (with id) is available. – xadm Sep 29 '18 at 19:07

how can I use Jquery in reactjs

1 Answers1