Top React Libraries — Formatting Numbers and Infinite Scrolling

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-number-format

The react-number-format package lets us format numbers our way.

To install it, we run:

npm i react-number-format

Then we can use the NumberFormat component to display numbers formatted our way.

For example, we can write:

import React from "react";
import NumberFormat from "react-number-format";

export default function App() {
  return (
    <div className="App">
      <NumberFormat
        value={585950}
        displayType={"text"}
        thousandSeparator={true}
        prefix={"$"}
      />
    </div>
  );
}

value has the value we want to format.

displayType is how we want to display the number.

thousandSeparator indicates that we want a separator.

prefix has the symbol that comes before the formatted number.

We can also add our own custom render function with the renderText prop:

import React from "react";
import NumberFormat from "react-number-format";

export default function App() {
  return (
    <div className="App">
      <NumberFormat
        value={57595995}
        displayType={"text"}
        thousandSeparator={true}
        prefix={"$"}
        renderText={value => <div>{value}</div>}
      />
    </div>
  );
}

And we can enter our own format string:

import React from "react";
import NumberFormat from "react-number-format";

export default function App() {
  return (
    <div className="App">
      <NumberFormat
        value={4111111111111111}
        displayType={"text"}
        format="#### #### #### ####"
      />
    </div>
  );
}

If we don’t have the displayType set to 'text' , then it’ll be displayed as an input:

import React from "react";
import NumberFormat from "react-number-format";

export default function App() {
  return (
    <div className="App">
      <NumberFormat format="#### #### #### ####" />
    </div>
  );
}

We also have the format prop to specify how to format the number.

We can also add a character for the mask with the mask prop:

import React from "react";
import NumberFormat from "react-number-format";

export default function App() {
  return (
    <div className="App">
      <NumberFormat format="#### #### #### ####" mask="_" />
    </div>
  );
}

This lets us show the hints with the _ character.

We can do a lot more with it, like manipulating the element itself and add custom inputs.

React Infinite Scroller

React Infinite Scroller is an infinite scrolling component for our React app.

To install it, we can run:

npm i react-infinite-scroller

Then we can use it by writing:

import React from "react";
import InfiniteScroll from "react-infinite-scroller";

export default function App() {
  const [arr, setArr] = React.useState(
    Array(50)
      .fill()
      .map((_, i) => i)
  );
  return (
    <div className="App">
      <InfiniteScroll
        pageStart={0}
        loadMore={() =>
          setArr(arr => [
            ...arr,
            ...Array(50)
              .fill()
              .map((_, i) => i)
          ])
        }
        hasMore
        loader={
          <div className="loader" key={0}>
            Loading ...
          </div>
        }
      >
        {arr.map(a => (
          <p>{a}</p>
        ))}
      </InfiniteScroll>
    </div>
  );
}

We use the InfiniteScroll component with the loadMore prop to load more data when we reach the bottom of the page.

The loader prop has the component to show when data is loading.

pageStart has the starting page to load.

hasMore indicates whether we have more items to load.

In between the tags, we show the items with the code.

Also, we can set the useWindow prop to false to listen to DOM scroll events.

For example, we can write:

import React from "react";
import InfiniteScroll from "react-infinite-scroller";

export default function App() {
  const [arr, setArr] = React.useState(
    Array(50)
      .fill()
      .map((_, i) => i)
  );
  return (
    <div className="App">
      <div style={{ height: 300, overflow: "auto" }}>
        <InfiniteScroll
          pageStart={0}
          loadMore={() =>
            setArr(arr => [
              ...arr,
              ...Array(50)
                .fill()
                .map((_, i) => i)
            ])
          }
          hasMore
          useWindow={false}
          loader={
            <div className="loader" key={0}>
              Loading ...
            </div>
          }
        >
          {arr.map(a => (
            <p>{a}</p>
          ))}
        </InfiniteScroll>
      </div>
    </div>
  );
}

We have a div that’s 300px tall.

Also, we set the overflow to 'auto' so that the div has a scrollbar when the items overflow the div.

Then we have the InfiniteScroll component to display the items.

useWindow is set to false so that we watch if we scrolled to the bottom of the div instead of the window.

The rest of the code is the same.

Conclusion

react-number-format lets us format numbers and display them as text or in an input box.

React Infinite Scroller is an easy to use infinite scroll package.