Building a pager component from scratch* -- part 2

andy — Wed, 24 Jul 2019 01:33:47 +0000

If you missed the first part of this lesson, it can be found here: https://dev.to/ajsmth/building-a-pager-component-from-scratch-4nlh

In this part, we'll add on to the pager component we've already created by handling animations and gestures to page between child views

The first thing we'll add is spring animations when the activeIndex prop changes. In order to do so, let's bring in react-spring and import some of it's functions:

yarn add react-spring 

import {animated, useSpring} from 'react-spring'

Adding spring page transitions:

function Pager({ children, activeIndex, size }) {
  // the total offset of the container div -- based on activeIndex
  const translateX = `translateX(calc(${activeIndex * -100}%))`;

  // this will animate changes in activeIndex between pages:
  const animatedStyle = useSpring({ transform: translateX })

  return (
    <div ...>

      {/* Update to animated.div */}
      <animated.div
        style={{
          ...absoluteFill,
          // we will translate this container view to bring children into focus
          ...animatedStyle
        }}
      >
        {React.Children.map(children, (element, index) => (
          <PageView index={index} width={size}>
            {element}
          </PageView>
        ))}
      </animated.div>

    </div>
  );
}

Now we have a spring animation that transitions between page changes

Next, we'll want to add support for handling swipe gestures. Again, we'll need a helper library

yarn add react-use-gesture

import {useDrag} from 'react-use-gesture'

This will help us track the drag value on the container view:

function Pager({ children, activeIndex, size }) {
  // ...

  const [{ dx }, set] = useSpring(() => ({ dx: 0 }));

  const bind = useDrag(({ delta }) => {
    const [dx] = delta;
    set({ dx: dx });
  });

  const dragX = dx.interpolate(dx => `translateX(${dx}px)`);

  {/* Change this container to animated.div */}
  return (
    <animated.div
      {...bind()}
      style={{
        ...
        transform: dragX
      }}
    >
     {...}
    </animated.div>
  );
}

You'll notice that after releasing, the translation value needs to reset in order to recenter the view. To achieve this let's update the useDrag() callback we just wrote:

  const bind = useDrag(({ delta, last }) => {
    const [dx] = delta;
    set({ dx: dx });

    // last means they've released from dragging
    if (last) {
      set({ dx: 0 });
    }
  });

Now the view re-centers after release.

So far, so good. What we need to consider now is how far the user has dragged, and if it's beyond a certain threshold, let's update the activeIndex so the next / previous view becomes focused.

The first thing we'll want to do is determine the threshold for when we should change -- in our case I'll set it to an arbitrary value of +/- 100:

  const bind = useDrag(({ delta, last }) => {
    const [dx] = delta;
    set({ dx: dx });

    // last means they've released from dragging
    if (last) {
      if (dx > DX_THRESHOLD) {
        // transition to previous view
      }

      if (dx < -DX_THRESHOLD) {
        // transition to next view
      }

      set({ dx: 0 });
    }
  });

Now we can use a callback prop to update the activeIndex prop and properly focus the previous / next page:

// add an onChange prop:
function Pager({ ..., onChange }) {

  ...

  // callback to onChange prop with new active value:

  const bind = useDrag(({ delta, last }) => {
    const [dx] = delta;
    set({ dx: dx });

    // last means they've released from dragging
    if (last) {
      if (dx > DX_THRESHOLD) {
        // transition to previous view
        onChange(activeIndex - 1)
      }

      if (dx < -DX_THRESHOLD) {
        // transition to next view
        onChange(activeIndex + 1)
      }

      set({ dx: 0 });
    }
  });

  ...
}

The last thing that we can do is to remove the border around our container view (if you still have it in your styles) and add an overflow: hidden style, if you'd like to hide the unfocused views.

One last note -- in practice, we might want to compute the threshold as a percentage of the total width, or whatever value you think works best.

The source for this can be viewed here: https://codesandbox.io/s/intelligent-cache-5f366

We now have a serviceable pager component that handles gestures and animates page transitions

What we'll look at next is opening up the pager API to work as a controlled and an uncontrolled component, as well as a psuedo-virtualization for child views which might help with with your app's performance. We'll also take a look at some jank that occurs in our existing implementation

Building a pager component from scratch*

andy — Tue, 23 Jul 2019 23:21:13 +0000

In this tutorial we'll go through the steps of building a pager component from "scratch" (not entirely accurate -- we'll use a few dependencies to help with handling gestures and animations later on). This first article will capture the core behaviour of the pager component before moving onto things like animations and gestures.

I originally implemented this in react-native, so an example of what the final product will (sort of) look like can be found here: https://github.com/ajsmth/react-native-pager-component#readme

Note: I know that components for this kind of thing already exist -- this was made for my own learning, and hopefully yours too.

Before getting into the code, let's think about what we want to do...

We want a component that, when given a certain index, moves the matching child index into focus. So we'll be thinking in terms of indexes -- when the activeIndex prop changes, we'll want to shift the focus to the child that matches that index:

onChange(activeIndex) -> updateTranslation(activeIndex)

We can achieve this by laying out all of our children horizontally inside a container view, like this:

const absoluteFill = {
  position: "absolute",
  left: 0,
  right: 0,
  bottom: 0,
  top: 0
};

function Pager({ children, activeIndex, size }) {
  return (
    <div
      style={{
        display: "flex",
        alignSelf: "center",

        position: "relative",
        width: size,
        height: size,
        border: "2px solid green"
      }}
    >
      <div
        style={{
          ...absoluteFill
          // we will translate this container view
        }}
      >
        {React.Children.map(children, (element, index) => (
          <PageView index={index} width={size}>
            {element}
          </PageView>
        ))}
      </div>
    </div>
  );
}

function PageView({ children, index }) {
  // position each page side-by-side based on it's index
  const position = `translateX(calc(${100 * index}%))`;

  return (
    <div
      style={{
        ...absoluteFill,
        transform: position,
        border: "thin solid red"
      }}
    >
      {children}
    </div>
  );
}

Now all we have to do is update the translation value of the inner container based on the activeIndex prop:

function Pager({ children, activeIndex, size }) {
  // the total offset of the container div -- based on activeIndex
  const translateX = `translateX(${activeIndex * -100}%)`;

  return (
    <div ...>
      <div
        style={{
          ...absoluteFill,
          transform: translateX
        }}
      >
        {React.Children.map(children, (element, index) => (
          <PageView index={index} width={size}>
            {element}
          </PageView>
        ))}
      </div>
    </div>
  );
}

The inner container now shifts its focus by computing its offset from the activeIndex prop. This is a pretty basic implementation so far, but hopefully you can see that it captures the core behaviour of what the final component will do.

The next steps will be to animate page transitions, and handle gestures to update the activeIndex based on user interaction. We'll also open up the component's API to make it fully controllable for use in other projects.

To see a full example visit https://codesandbox.io/s/modern-moon-o5etr

In the next article, we'll animate the transitions between pages:

https://dev.to/ajsmth/building-a-pager-component-from-scratch-part-2-557l

Forem: andy

Building a pager component from scratch* -- part 2

Building a pager component from scratch*