Top React Libraries — Swipes and Collapse

To make developing React apps easier, we can add some libraries to make our lives easier.

In this article, we’ll look at some popular libraries for React apps.

react-swipeable-views

react-swipeable-views is an easy to use package to let us add swipes gesture handling to our React app.

To use it, we install it by running:

npm i react-swipeable-views

Then we can use it by writing:

import React from "react";
import SwipeableViews from "react-swipeable-views";

const styles = {
  slide: {
    padding: 15,
    minHeight: 100,
    color: "black"
  },
  slide1: {
    background: "lightgreen"
  },
  slide2: {
    background: "lightblue"
  },
  slide3: {
    background: "orange"
  }
};

export default function App() {
  return (
    <div>
      <SwipeableViews>
        <div style={Object.assign({}, styles.slide, styles.slide1)}>
          slide 1
        </div>
        <div style={Object.assign({}, styles.slide, styles.slide2)}>
          slide 2
        </div>
        <div style={Object.assign({}, styles.slide, styles.slide3)}>
          slide 3
        </div>
      </SwipeableViews>
    </div>
  );
}

We just import the SwipeableViews component.

Then we add divs to in between the tags to add slides.

It also has experimental support for React Native.

We can also add the resistance bound effect with the resistance prop:

import React from "react";
import SwipeableViews from "react-swipeable-views";

const styles = {
  slide: {
    padding: 15,
    minHeight: 100,
    color: "black"
  },
  slide1: {
    background: "lightgreen"
  },
  slide2: {
    background: "lightblue"
  },
  slide3: {
    background: "orange"
  }
};

export default function App() {
  return (
    <div>
      <SwipeableViews resistance>
        <div style={Object.assign({}, styles.slide, styles.slide1)}>
          slide 1
        </div>
        <div style={Object.assign({}, styles.slide, styles.slide2)}>
          slide 2
        </div>
        <div style={Object.assign({}, styles.slide, styles.slide3)}>
          slide 3
        </div>
      </SwipeableViews>
    </div>
  );
}

Also, we can put our slides in the VirtualizeSwipeableViews component if we have many slides to load.

This way, they’re only loaded when they’re shown:

import React from "react";
import SwipeableViews from "react-swipeable-views";
import { virtualize, bindKeyboard } from "react-swipeable-views-utils";
import { mod } from "react-swipeable-views-core";

const VirtualizeSwipeableViews = bindKeyboard(virtualize(SwipeableViews));

const styles = {
  slide: {
    padding: 15,
    minHeight: 100,
    color: "black"
  },
  slide1: {
    backgroundColor: "lightgreen"
  },
  slide2: {
    backgroundColor: "orange"
  },
  slide3: {
    backgroundColor: "pink"
  }
};

function slideRenderer(params) {
  const { index, key } = params;
  let style;

  switch (mod(index, 3)) {
    case 0:
      style = styles.slide1;
      break;

    case 1:
      style = styles.slide2;
      break;

    case 2:
      style = styles.slide3;
      break;

  default:
      break;
  }

  return (
    <div style={Object.assign({}, styles.slide, style)} key={key}>
      {`slide ${index + 1}`}
    </div>
  );
}

export default function App() {
  const [index, setIndex] = React.useState(0);

  const handleChangeIndex = i => {
    setIndex(i);
  };

  const handleClick = () => {
    setIndex(19);
  };
  return (
    <div>
      <VirtualizeSwipeableViews
        index={index}
        onChangeIndex={handleChangeIndex}
        slideRenderer={slideRenderer}
      />
      <br />
      <button onClick={handleClick}>go to slide 20</button>
    </div>
  );
}

We created the slideRendered component to render the slide.

And then we pass that into the slideRenderer prop.

The index prop has the index of the slide.

We can change that programmatically to jump to the slide we want.

rc-collapse

rc-collapse is a package that we can create collapse components with.

To install it, we run:

npm i rc-collapse

Then we can use it by writing:

import React from "react";
import "rc-collapse/assets/index.css";
import Collapse, { Panel } from "rc-collapse";

const getItems = () => {
  const items = Array(10)
    .fill()
    .map((_, i) => (
      <Panel
        header={`This is panel header`}
        key={i}
        extra={<span>Extra</span>}
        defaultActiveKey="1"
      >
        <p>Panel with extra</p>
      </Panel>
    ));

  return items;
};

export default function App() {
  const [activeKey, setActiveKey] = React.useState(0);

  const onChange = activeKey => {
    setActiveKey(activeKey);
  };

  return (
    <div style={{ margin: 20, width: 400 }}>
      <button onClick={() => setActiveKey(8)}>active header 7</button>
      <br />
      <Collapse accordion activeKey={activeKey} onChange={onChange}>
        {getItems()}
      </Collapse>
    </div>
  );
}

We have the getItems function to return an array of Collapse components, which has a heading, text on the right, and text in the panel.

The extra prop has the text on the right side of the header.

In App , we have the Collapse component with the activeKey prop.

This prop sets the active collapse item. The full panel will be displayed if it’s active.

We set it when we click on the button.

The onChange function changes the activeKey so that the correct item will be expanded.

Conclusion

react-swipeable-views lets us handle swiping of elements.

rc-collapse lets us add collapse component to our React app.