はじめに

この記事では、React のバーコード生成ライブラリである react-barcode と next-barcode を比較します。

ダウンロード状況

react-barcode のほうが圧倒的にダウンロードされています。

開発環境

実装時の開発環境は以下の通りです。

Windows 11
VSCode
react-barcode 1.5.3
next-barcode 1.5.0
TypeScript 5.4.2
React 18.3.1
Node.js 20.13.1
npm 10.8.1

react-barcode

基本的な実装は以下の通りです。

Barcode コンポーネントをインポートして実装
バーコードの値は Barcode コンポーネントの value に渡す

App.tsx

import { FC } from "react";
import Barcode from "react-barcode";

export const App: FC = () => {
  return (
    <>
      <h2>React Barcode</h2>
      <Barcode value="12345678" />
    </>
  );
};

next-barcode

以前 react-barcodes という名前のバーコード生成ライブラリがありましたが、現在このライブラリは非推奨になっており、next-barcode に移行しました。

https://www.npmjs.com/package/react-barcodes

基本的な実装は以下の通りです。

useBarcode をインポート
useBarcode から inputRef を取得
svg タグの ref に inputRef を渡す
バーコードの値は useBarcode の引数 value に渡す

App.tsx

import { useBarcode } from "next-barcode";
import { FC } from "react";

export const App: FC = () => {
  const { inputRef } = useBarcode({
    value: "12345678",
  });

  return (
    <>
      <h2>Next Barcode</h2>
      <svg ref={inputRef} />
    </>
  );
};

svg の代わりに canvas や img も利用できます。

App.tsx

import { useBarcode } from "next-barcode";
import { FC } from "react";

export const App: FC = () => {
  const { inputRef } = useBarcode({
    value: "12345678",
  });

  return (
    <>
      <h3>Canvas</h3>
      <canvas ref={inputRef} />
    </>
  );
};

App.tsx

import { useBarcode } from "next-barcode";
import { FC } from "react";

export const App: FC = () => {
  const { inputRef } = useBarcode({
    value: "12345678",
  });

  return (
    <>
      <h3>Image</h3>
      <img ref={inputRef} />
    </>
  );
};

所感

できることに大きな差はなさそう（両者ともフォーマットやサイズ、余白、色のカスタマイズが可能）
実装は react-barcode のほうがシンプル
ダウンロード実績は圧倒的に react-barcode

参考