https://github.com/rmariuzzo/react-scrollie

Scroll listener React component that provide scrolling info
https://github.com/rmariuzzo/react-scrollie

react react-component scroll

Last synced: over 1 year ago
JSON representation

Scroll listener React component that provide scrolling info

• Host: GitHub
• URL: https://github.com/rmariuzzo/react-scrollie
• Owner: rmariuzzo
• License: mit
• Created: 2018-02-18T03:24:16.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-02-19T04:21:28.000Z (over 8 years ago)
• Last Synced: 2024-10-11T07:10:42.153Z (over 1 year ago)
• Topics: react, react-component, scroll
• Language: JavaScript
• Homepage: https://github.com/rmariuzzo/react-scrollie
• Size: 56.6 KB
• Stars: 6
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          


[![React Scrollie - Scroll listener React component that provide scrolling info to children as render prop.](.github/banner.svg)](https://github.com/rmariuzzo/react-scrollie)



## Features

 - **Only 5.73KB** (that's 2.53KB gzipped!).

 - **Detect scroll edges: `startX`, `endX`, `startY`, `endY`**.

 - **Built for React 16**.






## Installation

  - `npm install react-scrollie --save`

    or 

  - `yarn add react-scrollie`






## Usage

```js

import React from 'react'

import Scrollie from 'react-scrollie'

const Demo = () => (

  

    {scroll => (

      


        
Start X: {scroll.startX}

        

End X: {scroll.endX}

        

Start Y: {scroll.startY}

        

End Y: {scroll.endY}

      



    )}

  

)

```

[![Edit React Scrollie Demo](.github/demo.svg)](https://codesandbox.io/s/rlm0o580xm)


When **``** is mounted it will start to listen to scroll events and will execute the `children` render prop providing info about scroll position.

The `children` is expected to be a function.






## Documentation

 | Properties  | Type       | Default       | Description |

 | ---         | ---        | ---           | ---         |

 | `component` | `String`   | `div`         | The component to be rendered in place of a `Scrollie`. |






## Tests

TBD






## Development

To start contributing to this project, please do:

 1. Fork and clone this repo.

 2. Do your work.

 3. Create a PR.






## Releases

To release this project the following tasks should be done:

 1. Build distribution files: `yarn build`.

 2. Bump version and create tag: `npm version #.#.# -m 'Version %s.'`.

 3. Push new created tag: `git push origin --tags`.

 4. Publish: `npm publish`.






 


Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)