The easiest way to generate Barcode with react-barcode

Create Next App — Sun, 07 Jun 2020 01:04:42 +0000

Overview

react-barcode component is a light-weight and high-performance component that displays industry-standard 1D and 2D barcodes for React app. Generated barcodes are optimized for printing and on-screen scanning. It is designed for ease of use and does not require fonts.

Live demo

Customization

react-barcode component is easily customizable. It provides options to customize its color, height, width, and more.

Label

react-barcode provides an option to display a barcode with or without text along with alignment options for React.

Type

react-barcode supports wide a range of types.

Features

Compatible with both JavaScript and TypeScript
Generate as SVG, Canvas and Image
Support multiple barcodes type

Installation

react-barcode is available on npm. It can be installed with the following command:



npm install --save @createnextapp/react-barcode

react-barcode is available on yarn as well. It can be installed with the following command:



yarn add @createnextapp/react-barcode

Usage

SVG



import React from 'react';
import { useBarcode } from '@createnextapp/react-barcode';

function App() {
  const { inputRef } = useBarcode({
    value: 'createnextapp',
    options: {
      background: '#ccffff',
    }
  });

  return <svg ref={inputRef} />;
};

export default App;

Canvas



import React from 'react';
import { useBarcode } from '@createnextapp/react-barcode';

function App() {
  const { inputRef } = useBarcode({
    value: 'createnextapp',
    options: {
      displayValue: false,
      background: '#ffc0cb',
    }
  });

  return <canvas ref={inputRef} />;
};

export default App;

Image



import React from 'react';
import { useBarcode } from '@createnextapp/react-barcode';

function App() {
  const { inputRef } = useBarcode({
    value: 'createnextapp',
    options: {
      background: '#ffff00',
    }
  });

  return <img ref={inputRef} />;
};

export default App;

To learn more how to use react-barcode:

Documentation

Why AsyncLocalStorage instead of LocalStorage?

Create Next App — Sun, 31 May 2020 03:29:16 +0000

Cons of LocalStorage

LocalStorage is synchronous, each local storage operation you run will be one-at-a-time. For complex applications this is a big no-no as it'll slow down your app's runtime.

Pros of AsyncLocalStorage

AsyncLocalStorage is asynchronous, each local async storage operation you run will be multi-at-a-time. It'll speed up your app's runtime.

The AsyncLocalStorage JavaScript code is a facade that provides a clear JavaScript API, real Error objects, and non-multi functions. Each method in the API returns a Promise object.

Installation

async-local-storage is available on npm. It can be installed with the following command:

npm install --save @createnextapp/async-local-storage

async-local-storage is available on yarn as well. It can be installed with the following command:

yarn add @createnextapp/async-local-storage

Usage

Import

import AsyncLocalStorage from '@createnextapp/async-local-storage'

Store data

storeData = async () => {
  try {
    await AsyncLocalStorage.setItem('@key', 'value')
  } catch(e) {
    // error
  }
}

Read data

readData = async () => {
  let data

  try {
    data = await AsyncLocalStorage.getItem('@key')
  } catch(e) {
    // error
  }

  console.log(data)

  /*
    output: 
    value
  */
}

To learn more how to use async-local-storage:

API Documentation

DEV Community: Create Next App

The easiest way to generate Barcode with react-barcode

Overview

Customization

Label

Type

Features

Installation

Usage

SVG

Canvas

Image

Why AsyncLocalStorage instead of LocalStorage?

Cons of LocalStorage

Pros of AsyncLocalStorage

Installation

Usage

Import

Store data

Read data