All Projects → EmaSuriano → React Scroll Section

EmaSuriano / React Scroll Section

React library to provide a declarative scroll to between sections

Programming Languages

typescript
32286 projects
declarative
70 projects

Projects that are alternatives of or similar to React Scroll Section

Wxp Ui
小程序插件合集(下拉刷新, 拖拽排序, 索引列表, 日期选择, 侧滑删除...)
Stars: ✭ 636 (+1345.45%)
Mutual labels:  scroll
Infinite Ajax Scroll
Turn your existing pagination into infinite scrolling pages with ease
Stars: ✭ 804 (+1727.27%)
Mutual labels:  scroll
React Redux Scroll
Stars: ✭ 30 (-31.82%)
Mutual labels:  scroll
Scrolldir
0 dependency JS plugin to leverage scroll direction with CSS ⬆⬇ 🔌💉
Stars: ✭ 679 (+1443.18%)
Mutual labels:  scroll
Scrollbooster
Enjoyable content drag-to-scroll library
Stars: ✭ 775 (+1661.36%)
Mutual labels:  scroll
Nice Anim
An animate on scroll Web Component built with StencilJS
Stars: ✭ 23 (-47.73%)
Mutual labels:  scroll
Navigation Toolbar
Navigation toolbar is a slide-modeled UI navigation controller made by @Ramotion
Stars: ✭ 587 (+1234.09%)
Mutual labels:  scroll
Dragscroll
micro library for drag-n-drop scrolling style
Stars: ✭ 989 (+2147.73%)
Mutual labels:  scroll
Gravityslider
🔄 GravitySlider is a beautiful alternative to the standard UICollectionView flow layout.
Stars: ✭ 784 (+1681.82%)
Mutual labels:  scroll
Android scroll endless
Scroll endless for Android recyclerview
Stars: ✭ 12 (-72.73%)
Mutual labels:  scroll
Txscrolllabelview
🌭TXScrollLabelView, the best way to show & display information such as adverts / boardcast / onsale e.g. with a customView.
Stars: ✭ 714 (+1522.73%)
Mutual labels:  scroll
Mos
一个用于在 macOS 上平滑你的鼠标滚动效果或单独设置滚动方向的小工具, 让你的滚轮爽如触控板 | A lightweight tool used to smooth scrolling and set scroll direction independently for your mouse on macOS
Stars: ✭ 7,772 (+17563.64%)
Mutual labels:  scroll
Rsdayflow
iOS 7+ Calendar (Date Picker) with Infinite Scrolling.
Stars: ✭ 843 (+1815.91%)
Mutual labels:  scroll
Vuebar
(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com
Stars: ✭ 650 (+1377.27%)
Mutual labels:  scroll
Scroll Snap Carousel
Carousel based on CSS Scroll Snap functionality
Stars: ✭ 31 (-29.55%)
Mutual labels:  scroll
React Virtual List
Super simple virtualized list React component
Stars: ✭ 597 (+1256.82%)
Mutual labels:  scroll
Eager Image Loader
The eager-loading for image files on the web page that loads the files according to your plan. This differs from the lazy-loading, for example, this can be used to avoid that the user waits for the loading.
Stars: ✭ 22 (-50%)
Mutual labels:  scroll
Infinite Webl Gallery
Infinite Auto-Scrolling Gallery using WebGL and GLSL Shaders.
Stars: ✭ 42 (-4.55%)
Mutual labels:  scroll
Remember Scroll
🎯 A plugin using localStorage to remember element scroll-position when closed the page.
Stars: ✭ 33 (-25%)
Mutual labels:  scroll
Fuckmyscroll.js
🔮 Animated scrolling to certain point or anchor
Stars: ✭ 10 (-77.27%)
Mutual labels:  scroll

react-scroll-section

Build Status npm package Netlify Status

React Scroll Section logo

A declarative solution to vertically navigate your React App

Live demo ✨

Why you should use it? 🤔

When you think about implementing a scrollTo functionality in a website the first thing it will your mind will be jQuery, using the following line of code:

$('#target').scroll();

I won't deny that actually works, but the problem comes when you start working with frameworks based on component, like React.

Manage the navigation to another section and which section can be hard task without a state management library.

This library will help you to avoid thinking all the possible edges cases and focus on the final result, which is just provide an easy navigation inside your app.

Built with 🔧

Just React! Using the following API:

  • Context: using the of <Consumer /> and <Provider />.
  • Ref: new createRef API
  • Hooks: useScrollSection and useScrollSections to interact with the registered sections.

Installation

# npm
> npm install react-scroll-section

# yarn
> yarn add react-scroll-section

Usage

The library provides the following components:

  • ScrollingProvider: responsible to link Section and SectionLink and know which Section is selected.
  • Section: renders a <section /> tag that receives an ID and register itself in ScrollingProvider.
  • useScrollSection: React Hook given the id of the section returns if the section is selected and a callback to scroll to it.
  • useScrollSection: returns an array of all the sections with id, selected and scrollTo.

Examples

Using SectionLink (Static Menu)

import React from 'react';
import {
  ScrollingProvider,
  useScrollSection,
  Section,
} from 'react-scroll-section';

const StaticMenu = () => {
  const homeSection = useScrollSection('home');
  const aboutSection = useScrollSection('about');

  return (
    <ul>
      <li onClick={homeSection.onClick} selected={homeSection.selected}>
        Home
      </li>
      <li onClick={aboutSection.onClick} selected={aboutSection.selected}>
        About
      </li>
    </ul>
  );
};

const App = () => (
  <ScrollingProvider>
    <StaticMenu />
    <Section id="home">MY HOME</Section>
    <Section id="about">ABOUT ME</Section>
  </ScrollingProvider>
);

Using SectionLinks (Dynamic Menu)

import React from 'react';
import {
  ScrollingProvider,
  useScrollSections,
  Section,
} from 'react-scroll-section';

export const DynamicMenu = () => {
  const sections = useScrollSections();

  return (
    <ul>
      {sections.map(({ id, onClick, selected }) => (
        <li key={id} onClick={onClick} selected={selected}>
          {id.toUpperCase()}
        </li>
      ))}
    </ul>
  );
};

const App = () => (
  <ScrollingProvider>
    <DynamicMenu />
    <Section id="home">Home section</Section>
    <Section id="about">About section</Section>
  </ScrollingProvider>
);

Props

ScrollingProvider

Property Type Required Default Description
debounceDelay number false 50 time to wait until the calculation of the current section
scrollBehavior string false "smooth" scrolling style
children ReactNode false null React component
offset number false null Vertical offset the modifies the final scrolling position

Section

Property Type Required Default Description
children ReactNode false null Section content
id string true - Section ID

Contributing

Setup project

  • Running yarn install in the component's root directory will install everything you need for development.

Demo Development Server

Testing

  • yarn test: executes Cypress and run test. Remember to execute yarn start in order to have a successful result.
  • yarn test:open: opens Cypress interface which allows you to execute test individually and preview the order execution of the tests.

Building

  • yarn build: builds the library, this is necessary to be published to npm.

Contribute ❤️

I'm always open for suggestions and improvements, so don't hesitate to open an Issue or new Pull Request 😁

License 🔖

MIT.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].