DEV Community

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

Posted on • Originally published at readymadecode.com

 

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 (0)

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!