https://github.com/iamchathu/react-jsbarcode

JSBarcode component for modern React.js with types.
https://github.com/iamchathu/react-jsbarcode

barcode barcode-generator hacktoberfest jsbarcode react reactcomponent typescript

Last synced: 3 months ago
JSON representation

JSBarcode component for modern React.js with types.

• Host: GitHub
• URL: https://github.com/iamchathu/react-jsbarcode
• Owner: iamchathu
• License: mit
• Created: 2021-10-07T08:00:48.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2025-10-03T21:58:43.000Z (3 months ago)
• Last Synced: 2025-10-03T23:31:51.678Z (3 months ago)
• Topics: barcode, barcode-generator, hacktoberfest, jsbarcode, react, reactcomponent, typescript
• Language: TypeScript
• Homepage: http://chathu.me/react-jsbarcode/
• Size: 327 KB
• Stars: 18
• Watchers: 4
• Forks: 8
• Open Issues: 15
• Metadata Files:
  • Readme: Readme.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-jsbarcode

[![npm](https://img.shields.io/npm/v/react-jsbarcode.svg)](https://www.npmjs.com/package/react-jsbarcode)

[![Known Vulnerabilities](https://snyk.io/test/github/iamchathu/react-jsbarcode/badge.svg)](https://snyk.io/test/github/iamchathu/react-jsbarcode)

[![Code Climate](https://codeclimate.com/github/iamchathu/react-jsbarcode/badges/gpa.svg)](https://codeclimate.com/github/iamchathu/react-jsbarcode)

[![Codacy Badge](https://app.codacy.com/project/badge/Grade/1327fdb350f84fc7b3dded573c983892)](https://www.codacy.com/gh/iamchathu/react-jsbarcode/dashboard?utm_source=github.com&utm_medium=referral&utm_content=iamchathu/react-jsbarcode&utm_campaign=Badge_Grade)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/iamchathu/react-jsbarcode/master/LICENSE)

[![Twitter](https://img.shields.io/twitter/url/https/github.com/iamchathu/react-jsbarcode.svg?style=social)](https://twitter.com/intent/tweet?text=Barcode+for+react&url=https%3A%2F%2Fgithub.com%2Fiamchathu%2Freact-jsbarcode)

## About

This is a [React](https://reactjs.org) component wrapping up [jsbarcode](<[https://](https://github.com/lindell/JsBarcode)>). Written as a React functional component using React hooks. 

## Demo

[![Edit react-jsbarcode](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-jsbarcode-2659g?fontsize=14&hidenavigation=1&theme=dark)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/react-jsbarcode?file=src%2FApp.tsx)

## Installation

using NPM

```bash

npm i react-jsbarcode

```

using yarn

```bash

yarn add react-jsbarcode

```

using PNPM

```bash

pnpm add react-jsbarcode

```

## Usage

- Basic usage

```tsx

import { ReactBarcode } from 'react-jsbarcode';

const App = () => {

  return ;

};

```

- Advanced usage

```tsx

import { ReactBarcode } from 'react-jsbarcode';

const App = () => {

  return ;

};

```

For all options refer jsbarcode [wiki](https://github.com/lindell/JsBarcode/wiki/Options).

### Renderers

JSBarcode supports rendering to SVG, image and canvas. Default renderer is 'svg'.

[![Edit react-jsbarcode](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-jsbarcode-2659g?fontsize=14&hidenavigation=1&theme=dark)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/react-jsbarcode?file=src%2FApp.tsx)