DEV Community

Cover image for Create barcode in React JS or React Native Apps
Chetan Rohilla
Chetan Rohilla

Posted on Edited on Originally published at w3courses.org

Create barcode in React JS or React Native Apps

A barcode is a machine-readable representation of numerals and characters. It consists of bars and spaces. A barcode is shown as an image that consists of a series of parallel black and white bars that can be read by a barcode scanner. Barcodes encodes the product information. It helps to manage items at a store or track inventory in a warehouse. Here we will create barcode in React JS or React Native Apps.

We can use package react-barcode which provides us a component for use with React. You can read about this package in detail here.

Create barcode in React JS or React Native Apps

Installation

npm install react-barcode
Enter fullscreen mode Exit fullscreen mode

Usage

Now, we have Component which we can use in our class or functional component easily. Below is a sample usage of this component.

var React = require('react');
var ReactDOM = require('react-dom');
var Barcode = require('react-barcode');

ReactDOM.render(
  <Barcode value="http://github.com/kciter" />,
  mountNode
);
Enter fullscreen mode Exit fullscreen mode

That’s it using this package react-barcode we can create a barcode in our react or react-native.


Please like share subscribe and give positive feedback to motivate me to write more for you.

For more tutorials please visit my website.

Thanks:)
Happy Coding:)

Top comments (1)

Collapse
 
junibrosas profile image
Juni Brosas

I don't think react-barcode can be used in a React Native project.

github.com/kciter/react-barcode/is...