react-sticky-state - GitLite

KO | EN

gitlite — search

#javascript #python #typescript #rust #nodejs #java #windows #kubernetes #awesome-list #vue #pytorch #security #mcp #openai

react-sticky-state

(★ 96)

ReactStickyState makes native position:sticky statefull and polyfills the missing sticky browser feature

File Explorer

Download Latest Version (.zip)

- featureDetect.js
- react-sticky-state.js
- react-sticky-state.min.js
- sticky-state.css
- - favicon.ico
  - index.html
- - App.css
  - App.js
  - App.test.js
  - index.css
  - index.js
  - logo.svg
- .gitignore
- package.json
- README.md
- index.html
- main.css
- featureDetect.js
- react-sticky-state.js
- featureDetect.js
- react-sticky-state.js
- sticky-state.css
- sticky-state.scss
- index.js
.babelrc
.editorconfig
.gitattributes
.gitignore
.jscsrc
package.json
README.md
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/soenkekluth/react-sticky-state

Downloads the entire project code from GitHub to your computer.

cd react-sticky-state

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install react-sticky-state

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-sticky-state
The React Sticky[State] Component makes native position:sticky statefull and polyfills the missing sticky browser feature.

Its the React version of https://github.com/soenkekluth/sticky-state

todays browser do not all support the position:sticky feature (which by the way is beeing used (polyfilled) on pretty much every site you visit) - moreover the native supported feature itself comes without a readable state. something like a:hover => div:sticky to add different styles to the element in its sticky state - or to read the state if needed in javacript.

unlike almost all polyfills you can find in the wild StickyState is high perfomant. the calculations are reduced to a minimum by persisting several attributes.

# Warning concerning Chromes implementation of native position:sticky
it looks like chromes implementaton of position:sticky is different to all other implementations out there. don't know if thats a bug - but bottom is currently not recognized by chrome. there will be a fix for this soon in sticky-state

### Browser support
IE >= 9, *

### demo
https://rawgit.com/soenkekluth/react-sticky-state/master/examples/index.html

### install
```
npm install react-sticky-state
```

### css
your css should contain the following lines: 
(you can specify the classNames in js)
```css
.sticky {
  position: -webkit-sticky;
  position: sticky;
}

.sticky.sticky-fixed.is-sticky {
  margin-top: 0;
  margin-bottom: 0;
  position: fixed;
  -webkit-backface-visibility: hidden;
          -moz-backface-visibility: hidden;
       backface-visibility: hidden;
}

.sticky.sticky-fixed.is-sticky:not([style*="margin-top"]) {
  margin-top: 0 !important;
}
.sticky.sticky-fixed.is-sticky:not([style*="margin-bottom"]) {
  margin-bottom: 0 !important;
}

.sticky.sticky-fixed.is-absolute{
  position: absolute;
}

```

### js
```javascript

import Sticky from 'react-sticky-state';

<Sticky>
  ........
</Sticky>

```

Sticky either takes its only child and adds the behavior and classes to it or wrappes all children inside an element if there are more than one. the tagname can be defined by props.

### possible props

```javascript
static propTypes = {
    initialize: PropTypes.bool,
    wrapperClass: PropTypes.string,
    stickyClass: PropTypes.string,
    fixedClass: PropTypes.string,
    stateClass: PropTypes.string,
    disabledClass: PropTypes.string,
    absoluteClass: PropTypes.string,
    disabled: PropTypes.bool,
    debug: PropTypes.bool,
    wrapFixedSticky: PropTypes.bool,
    tagName: PropTypes.string,
    scrollClass: PropTypes.shape({
      down : PropTypes.string,
      up : PropTypes.string,
      none : PropTypes.string,
      persist : PropTypes.bool,
      active : PropTypes.bool
    })
  };

static defaultProps = {
    initialize: true,
    wrapperClass: 'sticky-wrap',
    stickyClass: 'sticky',
    fixedClass: 'sticky-fixed',
    stateClass: 'is-sticky',
    disabledClass: 'sticky-disabled',
    absoluteClass: 'is-absolute',
    wrapFixedSticky: true,
    debug: false,
    disabled: false,
    tagName: 'div',
    scrollClass: {
        down: null,
        up: null,
        none: null,
        persist: false,
        active: false
      }
  };
```