React バーコード生成ライブラリ react-barcode と next-barcode の比較

はじめに

この記事では、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

参考

• react-barcode
• next-barcode