Представляем React-Screoll-к V2

Последняя версия компонента React Actology, который я поддерживаю только что вышел, V2 React-Screoll-to. Во-первых, он начался как компонент, который мне нужен, но со временем несколько человек начали использовать его. Поскольку он был изначально создан для моего конкретного использования, оно начал показывать свои бородавки, когда были просили новые функции. Цели для V2 были двумя частями: введите более гибкий API и реализуйте некоторые особые запросы от функций (прокрутки с помощью Ref и плавную прокрутку).

Так что такое React-Screoll-to? Реагистрационно-прокрутка – это довольно простой компонент. Это позволяет контролировать прокрутку окна бронирования, либо компонент (переполнение) в определенную точку.

Мы посмотрим на несколько примеров, чтобы показать, какой React-Scroll – для может сделать. (Как отмечают, в этом посте я покажу только рендеринг реквизиты, но React-Scroll – также поддерживает компоненты более высокого порядка. Примеры можно найти по адресу: https://github.com/ganderzz/react-scroll-to Несомненно

Основы

import React, { Component } from "react";
import { ScrollTo } from "react-scroll-to";

export default class MyComponent extends Component {
  render() {
    return (
      
        {({ scrollTo }) => (
           scrollTo({ y: 500 })}>Scroll to Bottom
        )}
      
    );
  }
}

В компоненте выше мы импортируем Scrollto компонент от реагирования-прокрутки к. Это рендеринг опоры, поэтому мы передам функцию в качестве своих детей. Scrollto Детям имеет объект в качестве параметра – это так, что потребитель этого компонента может точно выбрать, какие свойства они заботятся о. Как правило, нам нужно только Scrollto Отказ

Scrollto () Это функция, когда вызывается, будет либо:

Прокрутите окно Brower на основе заданных параметров (В этом случае прокрутите 500 пикселей сверху страницы)
Прокрутите все Компоненты, внутри к данным параметрам (мы увидим это позже)

Примечание: React-Screoll-для использования абсолютных позиций – Способность использовать относительное позиционирование в ближайшее время!

Когда пользователь нажимает на ссылку, в примере мы увидим окно прокрутите вниз 500 пикселей!

Зона прокрутки

Компонент дает сокрушить Возможность прокрутки компонентов, а не окна.

import React, { Component } from "react";
import { ScrollTo, ScrollArea } from "react-scroll-to";

export default class MyComponent extends Component {
  render() {
    return (
      
        {({ scrollTo }) => (
          <>
             scrollTo({ y: 500 })}>Scroll to Bottom

            
               My long content...
            
          
        )}
      
    );
  }
}

С А Компонент живет как детский компонент , всякий раз, когда мы называем Scrollto () , это прокручивает все компоненты. Таким образом, в этом примере, когда ссылка нажала только «мой длинный контент …», будет прокручивать.

Но что, если у нас будет несколько компоненты?

import React, { Component } from "react";
import { ScrollTo, ScrollArea } from "react-scroll-to";

export default class MyComponent extends Component {
  render() {
    return (
      
        {({ scrollTo }) => (
          <>
             scrollTo({ y: 500 })}>Scroll to Bottom

            
               My long content...
            

            
               My long content 2...
            
          
        )}
      
    );
  }
}

В случае, когда более одного Компоненты существуют в Оба компонента будут прокручивать.

Что если мы только хотим прокрутить один из компоненты?

import React, { Component } from "react";
import { ScrollTo, ScrollArea } from "react-scroll-to";

export default class MyComponent extends Component {
  render() {
    return (
      
        {({ scrollTo }) => (
          <>
             scrollTo({ id: "content-two", y: 500 })}>Scroll to Bottom

            
               My long content...
            

            
               My long content 2...
            
          
        )}
      
    );
  }
}

Добавляя ID Собственность для Мы можем ссылаться на этот компонент в нашем Scrollto () функция. Scrollto () Тогда принимает другое поле, «ID» , это прокручивает любой Компонент, который соответствует этому идентификатору (идентификатор должен быть уникальным).

Особенности V2

Scrollto и Scrollarea существовали в V1; Давайте посмотрим на филиал новые функции.

Плавная прокрутка

Плавная прокрутка не может быть проще. Добавляя Гладкий: правда Имущество для Scrollto () Объект, React-Scroll-для автоматического применения плавных прокрутки.

import React, { Component } from "react";
import { ScrollTo } from "react-scroll-to";

export default class MyComponent extends Component {
  render() {
    return (
      
        {({ scrollTo }) => (
           scrollTo({ x: 200, smooth: true })}>
             {/* Oh yeah, we can scroll by x also! */}
             Scroll to Bottom
          
        )}
      
    );
  }
}

Прокрутите с помощью Ref.

Возможно вместо использования Компонент, у нас есть компонент, который мы хотим прокрутить. Или, возможно, вместо этого мы хотим прокрутить компонент снаружи дети. Теперь у нас есть возможность, предоставляя ссылку через Scrollto () Объект аргумента!

import React, { Component } from "react";
import { ScrollTo } from "react-scroll-to";

export default class MyComponent extends Component {
  myRef = React.createRef();

  render() {
    return (
      
        {({ scrollTo }) => (
           scrollTo({ ref: this.myRef, y: 200, smooth: true })}>
             Scroll to Bottom
          
        )}
      

      
        I'm outside ScrollTo!
      
    );
  }
}

Вывод

V2 of React-Screoll – для предоставления структурных изменений позади сцен, которые позволят лучшему опыту разработчика при внедрении новых функций. Мы также добавили многие новые функции, которые были востребованы. Когда вещи затвердевают, мы надеемся разоблачить крючки в React-Screoll – чтобы допустить еще больше гибкости.

Проверьте это: React-Screoll-to Примеры: Кликните сюда

Также опубликовано: dylanpaulus.com

Оригинал: “https://dev.to/ganderzz/introducing-react-scroll-to-v2-5gm8”