CODEWITHSUNDEEP
javascriptreactjs
PositiveGuy
PositiveGuy

Reputation: 20202

Can't get Sticky Working in React

I'm trying to use INK's sticky js module to work. For some reason, it's just not. I also notice that if I take that <div className="ink-sticky"> <div className="ink-alert basic">Hey I stick to the top when you scroll!</div> </div> back out of my react component (and of course changing className to class) and past that directly in my index.html, the sticky works fine.

http://ink.sapo.pt/javascript-ui/#InkUISticky_1

My React Component:

const Content = Component({
    render(){
        var company = this.props.company;

        return (
            <div className='content padding-bottom-200 margin-top-50'>
                <div className="column-group">
                    <div className="all-20">
                        <div className="ink-sticky">
                            <div className="ink-alert basic">Hey I stick to the top when you scroll!</div>
                        </div>
                    </div>

                    <div className="all-80">


                    </div>
                </div>
           </div>
        )
    }
})

export default Content;

When the page renders, I see that the ink-alert has styled my div but the ink-sticky is doing nothing. I have included the js in my index.html as so:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/ink-flex.min.css">
        <link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="/lib/css/master.css" />


    </head>
    <body>
    <div class="wrap">
        <div class="ink-grid">
            <div id="app"></div>
            <script type="text/javascript" src="/scripts/app.bundle.js"></script>
        <script type="text/javascript" src="/lib/ink-3.1.10/js/ink-all.min.js"></script>
        <script type="text/javascript" src="/lib/ink-3.1.10/js/autoload.min.js"></script>
        </div>
    </div>
    </body>
</html>

This does work:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/ink-flex.min.css">
        <link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="/lib/css/master.css" />


    </head>
    <body>
    <div class="wrap">
        <div class="ink-grid">
                    <div class="ink-sticky">
                        <div class="ink-alert basic">Hey I stick to the top when you scroll!</div>
                    </div>
            <div id="app"></div>
            <script type="text/javascript" src="/scripts/app.bundle.js"></script>
        <script type="text/javascript" src="/lib/ink-3.1.10/js/ink-all.min.js"></script>
        <script type="text/javascript" src="/lib/ink-3.1.10/js/autoload.min.js"></script>
        </div>
    </div>
    </body>
</html>

Upvotes: 0

Views: 490

Answers (1)

Gosha A
Gosha A

Reputation: 4570

It probably has to do with the fact that, to make elements sticky, ink-sticky calls some JS to achieve that. Now, when the page just renders, it tries to find sticky elements by class name and automatically make them that, however your sticky elements are not in the HTML. They are dynamically added into the DOM.

Which means, you have to tell ink to make a certain element sticky, manually.

The most appropriate place to do that is in the componentDidMount lifecycle hook.

As far as I can see, Ink does have an API for making elements sticky: http://ink.sapo.pt/javascript/Ink.UI.Sticky/

Ideally, that behavior should be encapsulated into a component of its own:

const Sticky = React.createClass({
  componentDidMount() {
    const el = ReactDOM.findDOMNode(this);
    new Ink.UI.Sticky(el);
  },

  render() {
    return <div>{this.props.children}</div>
  }
});

This approach is what's used to bridge other UI libraries with React, not just this one. It can be used for jQuery UI and plugins, and so on, as well.

Upvotes: 2

Related Questions