Hello ! Is it possible to convert the barcode to an image ? If this feature is not available can it be implemented into react-barcode ?

Hello is there a way to make the barcode produced by this module printable and downloadable.

https://raw.githubusercontent.com/kciter/react-barcode/master/images/barcode.png

Everything works well under react 16, just need to clear up the peer dep warnings

I have installed react-barcode with yarn: yarn add react-barcode.
Then I connected this library in my project, collected the project with webpack and received the following error:

ERROR in ./node_modules/react-barcode/lib/react-barcode.js
Module not found: Error: Can't resolve 'create-react-class' in '/home/user/projects/best-project/node_modules/react-barcode/lib'

This error occurs because 'create-react-class' is in devDependencies.
Also there is 'react-props', which is used in the main library file.

Hi,
I have successfully created the canvas.
Now, I want to clear this canvas with the click of a button.

<div id="bar_code">
  <Barcode renderer="canvas" value={"test"} font="trebuchet ms" height={50} /><br/>
</div>

on click of button, I am trying the code below,

var bar_cnv = document.getElementById('bar_code').firstChild;
var ctx2 = bar_cnv.getContext('2d');
ctx2.clearRect(0, 0, bar_cnv.width, bar_cnv.height);

But the canvas is not getting cleared.
Any help will be appreciated.

The library is not able to render accented characters.

I tried every format.

minimum code to reproduce

<Barcode value="Café"/>

var barCodeOptions = {    
    width: 2,
    height: 100,
    format: "CODE128",
    displayValue: true,
    fontOptions: "",
    font: "monospace",
    textAlign: "center",
    textPosition: "bottom",
    textMargin: 2,
    fontSize: 20,
    background: "#ffffff",
    lineColor: "#000000",
    margin: 10,
    marginTop: undefined,
    marginBottom: undefined,
    marginLeft: undefined,
    marginRight: undefined      
}


------

<Barcode options={barCodeOptions} value={row.itemCodes}/>

This doesn't work.

Could someone with the appropriate access update the NPM registry entry to v 1.4.1 as seen in this repo?

Would love to get React 17 support/not have to do a SKIP_PREFLIGHT_CHECK on the env to avoid errors, especially since the code's already been updated. Thanks in advance for any help!

👋 @kciter,

Awesome lib, I've been using it for a couple of years!

You've probably heard about the upcoming Concurrent Mode, which imposes some additional restrictions to the components. It seems that react-barcode is not fully compatible because of a string ref begin used. Here is a warning I'm seeing after wrapping <Barcode> into <React.StrictMode>:

Warning: A string ref, "renderElement", has been found within a strict mode tree.
String refs are a source of potential bugs and should be avoided. We recommend
using useRef() or createRef() instead. Learn more about using refs safely here:
https://fb.me/react-strict-mode-string-ref

please help to update ,thanks~

👋 @kciter!

I’m using react-barcode in one of my projects, it’s been there for a while. Today I read about [email protected] in React Status and wanted to check what was new.

Unfortunately I could not find CHANGELOG.md or anything in https://github.com/kciter/react-barcode/releases which left me a bit confused.

It’d be great if you could summarise the changes and publish them. I know it’s possible to look at commit history etc, but this requires more skills and time. If there is a proper CHANGELOG entry, repo tools like Renovate Bot can pick them too!

PS Congrats on the release and on the mention in React Status! 🎉

Are you going to add Typescript in the future?

Hello. I started getting this error since I updated redux-persist from 4.8.0 to the latest version with Yarn 1.2.1.

./node_modules/react-barcode/lib/react-barcode.js
Module not found: Can't resolve 'create-react-class' in '..\node_modules\react-barcode\lib'

"dependencies": {
    "@types/history": "^4.5.0",
    "@types/jest": "^20.0.6",
    "@types/material-ui": "^0.18.2",
    "@types/moment-timezone": "^0.5.0",
    "@types/node": "^8.0.20",
    "@types/react": "^16.0.18",
    "@types/react-big-calendar": "^0.15.0",
    "@types/react-dnd": "^2.0.34",
    "@types/react-dnd-html5-backend": "^2.1.8",
    "@types/react-dom": "^16.0.2",
    "@types/react-redux": "^4.4.40",
    "@types/react-router-dom": "^4.0.4",
    "@types/react-router-redux": "^5.0.0",
    "@types/redux": "^3.6.0",
    "@types/redux-logger": "^3.0.0",
    "@types/redux-promise-middleware": "^0.0.6",
    "@types/validator": "6.3.0",
    "lodash": "^4.17.4",
    "material-ui": "0.19.2",
    "material-ui-datatables": "^0.18.2",
    "material-ui-fullscreen-dialog": "0.7.1",
    "moment-timezone": "^0.5.13",
    "react": "^16.0.0",
    "react-barcode": "^1.3.0",
    "react-big-calendar": "^0.16.1",
    "react-dnd": "^2.5.4",
    "react-dnd-html5-backend": "^2.5.4",
    "react-dock": "^0.2.4",
    "react-dom": "^16.0.0",
    "react-phone-number-input": "^0.12.10",
    "react-print": "^1.3.1",
    "react-redux": "5.0.6",
    "react-router-dom": "^4.1.1",
    "react-router-redux": "next",
    "react-tap-event-plugin": "^2.0.1",
    "react-transition-group": "^1.1.1",
    "redux": "3.7.2",
    "redux-logger": "^3.0.1",
    "redux-persist": "^5.2.2",
    "redux-promise-middleware": "4.2.1",
    "reselect": "^3.0.1",
    "validator": "8.2.0",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "react-scripts-ts": "^2.8.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  }

Are there support for preact. Because currently I am hitting this issue:

This is how I install:
yarn add react-barcode

This is how I did:

import { h, Component } from 'preact';
import Barcode from 'react-barcode';

...........

render() {
  return (
    <Barcode value="abc" />
  );
}

I wanted to render the barcode in an img tag and realized that nothing gets rendered.

Upon checking the installed react-barcode in node_modules i realized that the react-barcode.js file is still written using the createClass syntax and doesn't look like the react-barcode.js file in this repo.

Hello!

Thank you for this package. Is it possible to merge the React version pull request so we can remove the --legacy-peer-deps flag from our Azure build process? I never needed that until I added this package to our app.

Thank you.

This is my code < Barcode value={SCPXXXXX} format="EAN13" />
I want EAN 13 on barcode but it not working.
Can anyone help me ?
Sorry for my bad english

By adding className and id properties to the result of the render, the user could style this element and find it in the DOM.
This is an easy update and could close a number of issues.

• #30
• #32

Hi, I just recognize this condition difference with commend above.
This condition coincident matches with React version 16.12.0.

JsBarcode have a fix for this in their repo today, the dependency just needs updating to 3.3.18. But it set to 3.3.16 currently. Probably would be worth setting the dependency to ~3.3.18 to allow bug fixes from JsBarcode.

First of all, thanks for making this package, it's been really useful for our client-side React projects. When we attempt to server render our React code , however, using the renderToStaticMarkup() method available from ReactDOMserver, it renders empty SVG tags. While looking through the code, it appears that the SVG rendering requires that the target environment be an actual DOM. Is there any way to make this package compatible with a non-browser environment?

Why barcode generates numbers starting from 000000017 when I am using EAN13 format. But when I use the default format it works fine. How can I change that behavior?

How can I insert a barcode in PDF generated with @react-pdf/renderer library ??

Hello, i try to do that :
allCrowdSourced = crowdSource.map((id,index) => ({
"EAN": <Barcode value={id.ean} ref={id.ean + index} />
}));

and i get this error :
" Uncaught (in promise) Error: Element ref was specified as a string (260337780) but no owner was set. This could happen for one of the following reasons:

1. You may be adding a ref to a function component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded "

if someone can explain me what's wrong with the component.
if i do not pass ref in Barcode i've got the same error.

Thx for help

I'm trying to figure out how to just get the base64 string from my Barcode component. I can create the barcode on the page and if I copy the image location, I can see the actual base64 string that I want. https://codesandbox.io/s/determined-hawking-ow9mk
<Barcode value={'72527273070'} renderer={'img'} />
But how do I get that string in code? This is what I've tried:

const encodeSvg = reactElement => {
	return (
		'data:image/png;base64,' +
		escape(ReactDOMServer.renderToStaticMarkup(reactElement))
	);
};

const barcode = encodeSvg(
	<Barcode value={'72527273070'} renderer={'img'} />
);

console.log(barcode);

i did a fresh install of next.js 13.4.9

and im geting the above error, this is the only thing i have installed as well

below is my code in /app/barcode/page.jsx

import Barcode from "react-barcode";

export default function BarcodePage() {
return (

Call Stack
_inherits
node_modules\react-barcode\lib\react-barcode.js (25:112)
_inherits
node_modules\react-barcode\lib\react-barcode.js (47:2)
_react
node_modules\react-barcode\lib\react-barcode.js (111:2)
(rsc)/./node_modules/react-barcode/lib/react-barcode.js
/.next/server/vendor-chunks/react-barcode.js (20:1)
webpack_require
/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(rsc)/./app/barcode/page.jsx (9:71)
(rsc)/./app/barcode/page.jsx
/.next/server/app/barcode/page.js (162:1)
Function.webpack_require
/.next/server/webpack-runtime.js (33:42)
async eh
/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (22:152341)
async ek
/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (24:72156)
async
/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (24:74187)
async ek
/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (24:73954)
async
/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (24:74187)
async ek
/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (24:73954)
async
p/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (24:76201)

im still new to next and react all together this was a cool and easy solution until i ran into this. i didnt see anythting else related to this issue :( please let me know waht i can do to help fix this

jsbarcode is not the latest version, can update it ? thanks

Hello,
Is it possible to use % instead of px or maybe put a className for the width ?

Hi @kciter. Great to see React 16 support on master after #9 is merged! Could you please publish a new version on npm? As of now, the latest is still from Aug 2016.

Cheers!

i am able to generate the Barcode with the code 39 but the scanner is not reading the Barcode.
I was generated barcode in code 39 format with other npm modules and the Scanner able to read.

i got this error "TypeError: Cannot add property text, object is not extensible"
from generating barcode

my barcode template:
<Barcode
value={'123'}
margin={0}
height={35}
fontSize={0}
/>

react version: 15.5.4

anyone can help me? thanks~

Invariant Violation: View config not found for name svg. Make sure to start component names with a capital letter.

Hi, as you probably know,

React.createClass is deprecated and will be removed in version 16

Do you have any plans to support v16 of React?

Thanks!

Is there any types support plan in the future?

Hi, im having a weird issue when installing this package.

I tested it on Windows/Ubuntu and i have the same issue and with two vesions of Node

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] No repository field.
npm ERR! Linux 4.2.0-36-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "react-barcode"
npm ERR! node v4.4.3
npm ERR! npm  v3.8.7
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script 'node-gyp rebuild'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the canvas package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-gyp rebuild
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs canvas
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls canvas
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/cristiandley/proyectos/mdd/npm-debug.log

im missing something ?

I noticed the types in the package.json file are pointing to src/, but only lib is packaged on NPM, so types can't be found when using it:

snippet from package.json

  "main": "lib/react-barcode.js",
  "types": "src/index.d.ts",

I'll make a PR for this soon :)

Everything is fine after I run 'npm install --save react-barcode' except a react peer dependencies error.

npm WARN [email protected] requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.

But I got this error (below) when I run 'npm start' as usual. (It happens only when I have react-barcode installed in my project.)

module.js:538
throw err;
^

Error: Cannot find module 'react-dev-utils/clearConsole'
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object. (/Users/penpitchan/Developer/project-name/scripts/start.js:22:22)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: node scripts/start.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/penpitchan/.npm/_logs/2018-01-20T14_18_23_078Z-debug.log

I want to know how to solve his problem. Thank you in advance.