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

9 2

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:)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

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...

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay