React-magic-scroll - A react library for adding some effect you want when scroll

Overview

react-magic-scroll

A react library for adding some effect you want when scroll.

Installation

npm i @zhangsai/react-magic-scroll

Usage

step1: Write a normal scroll layout

<div className="container" ref={containerRef}>
  <div className="box">
    <h1>Ref1 title</h1>
    <p>Some Words...</p>
  </div>
  ...
</div>
body, html, #root {
  height: 100%;
}

.container {
  height: 100%;
  overflow-y: auto;
}

.box {
  height: 500px;
  border: 1px solid #000;
}

step2. Set Container

import { withMagicScroll, useMagicScrollConsumer, MagicScrollProvider } from '@zhangsai/react-magic-scroll';

function YourComponent() {
  const { containerRef } = useMagicScrollConsumer();
  return (
    <div className="container" ref={containerRef}>
      ...
    </div>
  );
}

export default withMagicScroll(App); // or use MagicScrollProvider

step3. Set scrolling target

import { easeCubicOut } from 'd3-ease';
import { scaleLinear } from 'd3-scale';

function YourComponent() {
  const { containerRef } = useMagicScrollConsumer();
  return (
    <div className="container" ref={containerRef}>
      <MagicScroll className="box"
        duration={500}
        offset={0}
        onProcess={(process, ref) => {
          const bezieredProcess = easeCubicOut(process);
          ref.style.transform = `matrix(1, 0, 0, 1, 0, ${150 * (1 - bezieredProcess)})`;
          ref.style.opacity = String(bezieredProcess);
          ref.style.backgroundColor = color3(process);
        }}
      >
        <h1>Title</h1>
        <p>Some Words...</p>
      </MagicScroll>
    </div>
  );
}

When the target by MagicScroll appear at the bottom of browser (what offset={0} means), duration will be started from 0, onProcess will be called with params process and ref, until duration to be 500.

  • process: Percant of duration
  • ref: Target dom, set any animation we want, like transformopacitycolor..., we can also use some helpers, like d3animetweenmax...

Or use useMagicScroll instead

import { useMagicScroll } from '@zhangsai/react-magic-scroll';

function YourComponent() {
  const { containerRef } = useMagicScrollConsumer();
  const ref = React.useRef<HTMLDivElement>(null);

  const targetOptions = React.useMemo<TargetOption[]>(() => {
    return [
      {
        targetRef: ref,
        duration: 500,
        offset: 0,
        onProcess(process, ref) {
          const bezieredProcess = easeCubicOut(process);
          ref.style.transform = `matrix(1, 0, 0, 1, 0, ${150 * (1 - bezieredProcess)})`;
          ref.style.opacity = String(bezieredProcess);
        },
      },
    ];
  }, []);

  useMagicScroll(targetOptions);

  return (
    <div className="container" ref={containerRef}>
      <div ref={ref} className="box">
        <h1>Ref1 title</h1>
        <p>Some Words...</p>
      </div>
    </div>
  );
}
Owner
diandian
diandian
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

react-native-actions-sheet A highly customizable cross platform ActionSheet for react native. Screenshots Features Cross Platform (iOS and Android) Na

Ammar Ahmed 678 Jan 14, 2022
✂️ React-Native component to cut a touch-through holes anywhere you want. Perfect solution for tutorial overlay

How it works code import { RNHoleView } from 'react-native-hole-view'; <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <

ibitcy 131 Jan 19, 2022
A image magic module for react native

react-native-imagewand React native image wand view for android. Enabling you to do instagram like effects to images Installation npm i --save react-n

Shao Hang, Weng 14 Mar 21, 2019
🏖️ Display some placeholder stuff before rendering your text or media content in React Native

Display some placeholder stuff before rendering your text or media content in React Native. Compatible with Expo and react-native-web. Snack applicati

Marvin Frachet 1.9k Jan 9, 2022
✈️ 🚀 React native progress-bar, give your progress-bar some brand style

React Native Air Progress Bar Pretty customizable and animated progress-bar component for React Native. We often need to customize our mobile applicat

Kirill Stepkin 54 Apr 10, 2021
💬 Follow some activities (new user, payment, ...) from your app via Slack and this webhook lib

react-native-slack-webhook Slack webhook for React-Native Installation $ npm i react-native-slack-webhook --save or $ yarn add react-native-slack-webh

Xavier Carpentier 53 Nov 4, 2021
Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar

react-native-scrollable-tab-view This is probably my favorite navigation pattern on Android, I wish it were more common on iOS! This is a very simple

Tomas Roos 6.8k Jan 18, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

FuYaoDe 3.2k Jan 17, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Shinix 61 Nov 13, 2021
🏀 Native bounceable effect for any React Native component. Built with Reanimated 2. Compatible with Expo.

Quick start > yarn add rn-bounceable Make sure you have react-native-reanimated and react-native-gesture-handler installed in your project. Usage impo

Batyr 18 Jan 9, 2022
With React-Icomoon you can easily use the icons you have selected or created in icomoon.

React-IcoMoon ?? Zero Dependencies With React-Icomoon you can easily use the icons you have selected or created in icomoon. Demo Install npm install r

Aykut Kardaş 94 Jan 13, 2022
:sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library or directly from the camera.

React Native Image Picker A React Native module that allows you to select a photo/video from the device library or camera. Note: If you are still usin

null 7.5k Jan 18, 2022
Small library that helps you to get status bar height, P.S 📱X supported ❤️

react-native-status-bar-height Small library that helps you to get status bar height P.S ?? X supported ❤️ Install $ npm install --save react-native-s

Dmitry Patsura 369 Jan 19, 2022
Parallax scroll view for react-native

react-native-parallax-scroll A ScrollView-like component that: Has a parallax background Has a parallax foreground Has a fixed or sticky header Can be

Monterosa 439 Jan 12, 2022
A react native scroll view component with Parallax header :p

RNParallax (react-native-parallax-header) A react native scroll view component with Parallax header :p Inspired by GitHub - jaysoo/react-native-parall

Carol 510 Jan 16, 2022
📜 React Native - Bidirectional Infinite Smooth Scroll

?? React Native Bi-directional Infinite Scroll Implement bidirectional infinite smooth scroll using React Native [ Built with ♥ at Stream ] Introducti

Stream 129 Jan 5, 2022
🪞 Mirror scroll lists for React Native

?? Mirror scroll lists for React Native

Akinn Rosa 38 Jan 10, 2022
Provides a React Native context that makes it easier to manipulate the scroll offset of a ScrollView in the app

Provides a React Native context that makes it easier to manipulate the scroll offset of a ScrollView in the app. This is mostly intended for when you have a single root ScrollView. This lets deeply nested children know the offset of the ScrollView and lets them change the root ScrollView's offset via a function without passing down props through many levels of children.

Maya Saringan 1 Oct 24, 2021