You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

react-sticky

Package Overview
Dependencies
Maintainers
1
Versions
51
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-sticky

<Sticky /> component for React

1.1.0
Source
npm
Version published
Weekly downloads
107K
10.59%
Maintainers
1
Weekly downloads
 
Created
Source

react-sticky

A simple React component polyfill for making any mounted component on your page sticky.

Installation

npm install react-sticky

Code Example

First, you will want to wrap the element you want to be sticky with tags. When the element is scrolled past the point where it would start to move off screen, the stickiness is activated.

app.jsx

var React = require('react'),
  Sticky = require('react-sticky');

var Header = React.createClass({
  render: function() {
    return (
      <Sticky>
        <header>
          <nav />
        </header>
      </Sticky>
    );
  },
});

When the "stickiness" becomes activated, the following css style rules are applied to the Sticky element:

  position: fixed;
  top: 0;
  left: 0;
  right: 0;

Options

In the event that you wish to override the style rules applied, simply pass in the style object as a prop:

app.jsx

<Sticky stickyStyle={customStyleObject}>
  <header />
</Sticky>

Note: For more information on the style object see http://facebook.github.io/react/tips/inline-styles.html

A more in-depth example is included, but you will need to build it first using the following command:

scripts/build-example

Contributors

Captivation Software (@teamcaptivation)

Aaron Goin

By all means, if you see room for improvement, let us know!

License

MIT License

Keywords

React

FAQs

Package last updated on 18 Mar 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts