https://github.com/nihgwu/stickyard

Make your React component sticky the easy way
https://github.com/nihgwu/stickyard

component react render-props sticky

Last synced: about 1 month ago
JSON representation

Make your React component sticky the easy way

• Host: GitHub
• URL: https://github.com/nihgwu/stickyard
• Owner: nihgwu
• License: mit
• Created: 2018-07-31T02:25:03.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-26T11:13:04.000Z (over 1 year ago)
• Last Synced: 2024-05-09T16:43:24.684Z (about 2 months ago)
• Topics: component, react, render-props, sticky
• Language: JavaScript
• Homepage: https://nihgwu.github.io/stickyard/
• Size: 3.32 MB
• Stars: 83
• Watchers: 3
• Forks: 3
• Open Issues: 40
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-react-render-props - stickyard
• awesome-react-render-props - stickyard

README

        
# Stickyard

Make your React component sticky the easy way, using render prop [https://nihgwu.github.io/stickyard/](https://nihgwu.github.io/stickyard/)

## Install

```bash

# Yarn

yarn add stickyard

# NPM

npm install --save stickyard

```

## Props

### children

`function({})` | _required_

Render whatever you want, it's called with an object with the following properties:

- `registerContainer(ref)`, pass to the container's `ref` prop.

- `registerSticky(ref)`, pass to the `ref` prop of whatever node within the container if you want to make it sticky.

- `updateState()`, update the sticky state manually, this useful if your content is resizable.

- `getStickyOffsets()`, return all the sticky-able elements' offsets.

- `scrollToIndex(index)`, scroll to the specific sticky element by index.

- `scrollTo(offset)`, scroll to the specific offset.

> The ref-register must be passed to the real DOM node, so if the component is a wrapper uppon DOM node,

> you need to register it to the underlying DOM node, using `innerRef` or something like that if provided.

### stickyClassName

`string`

The className to be attached to the element when it's sticky.

> This feature relies on `classList` which is not supported below IE10,

> so it won't take any effect on IE9 or below, you can use `onSticky` to implement by yourself.

### onSticky

`function(index)`

It's called when an element becomes sticky, `-1` means there is no sticky element.

## Usage

```js

import Stickyard from 'stickyard'

// pseudo code

  {({ registerContainer, registerSticky }) => (

    


      {items.map((item, index) => (

        


          {item.label}

        

      ))}

    

  )}


```

## License

MIT © [Neo](https://github.com/nihgwu)