react-scroll-changer v1.0.4

react-scroll-changer

A simple way to do things on scroll.

Demos

• Demo site

Installation

npm install react-scroll-changer

Overview & Basic Example

React Scroll Changer attempts to create an easy component to wrap components and affect them via scroll. A basic setup is something as follows.

app.jsx

import React, { Component } from 'react';
import ScrollChanger from 'react-scroll-changer';

const View = ({ scrollAmount }) => (
  <div
    style={{
      width: "100vw",
      height: "100vh",
      backgroundColor: "#FCD06B",
      opacity: scrollAmount
    }}
  />
);

class App extends Component ({
  render() {
    return (
    <ScrollChanger
      children={<View length={2} />}
      start={1}
      end={0}
      length={2}
    />
    );
  },
});

The ScrollChanger component wraps a seperate view and passes down the scrollAmount function, which is transitions based on the start and end amounts stipulated.

Props

License

MIT