react-jsbarcode 0.2.3 → 0.4.1

package/Readme.md

@@ -11,6 +11,10 @@
 
 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. <ReactBarcode />
 
+## CodeSandbox 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)
+
 ## Installation
 
 using NPM
@@ -25,25 +29,31 @@ using yarn
 yarn add react-jsbarcode
 ```
 
+using PNPM
+
+```bash
+pnpm add react-jsbarcode
+```
+
 ## Usage
 
 - Basic usage
 
 ```tsx
-import ReactBarcode from 'react-jsbarcode';
+import Barcode from 'react-jsbarcode';
 
 const App = () => {
-  return <ReactBarcode value="ABC123" />;
+  return <Barcode value="ABC123" />;
 };
 ```
 
 - Advanced usage
 
 ```tsx
-import ReactBarcode from 'react-jsbarcode';
+import Barcode from 'react-jsbarcode';
 
 const App = () => {
-  return <ReactBarcode value="ABC123" options={{ format: 'code128' }} renderer="svg" />;
+  return <Barcode value="ABC123" options={{ format: 'code128' }} renderer="svg" />;
 };
 ```
 
@@ -52,3 +62,5 @@ For all options refer jsbarcode [wiki](https://github.com/lindell/JsBarcode/wiki
 ### 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)

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { Options } from 'jsbarcode';
 export declare const enum Renderer {
     svg = "svg",

package/lib/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
+import { useRef, useEffect } from 'react';
 
 var barcodes = {};
 
@@ -3332,17 +3332,17 @@ if (typeof jQuery !== 'undefined') {
 var JsBarcode_1 = JsBarcode;
 
 const ReactBarcode = ({ style, className, value, options, renderer = "svg" }) => {
-    const containerRef = React.useRef(null);
-    React.useEffect(() => {
+    const containerRef = useRef(null);
+    useEffect(() => {
         JsBarcode_1(containerRef.current, value, options);
     }, [value, options, renderer]);
     switch (renderer) {
         case 'canvas':
-            return jsx("canvas", { ref: containerRef, style: style, className: className }, void 0);
+            return jsx("canvas", { ref: containerRef, style: style, className: className });
         case 'image':
-            return jsx("img", { ref: containerRef, alt: "barcode", style: style, className: className }, void 0);
+            return jsx("img", { ref: containerRef, alt: "barcode", style: style, className: className });
         default:
-            return jsx("svg", { ref: containerRef, style: style, className: className }, void 0);
+            return jsx("svg", { ref: containerRef, style: style, className: className });
     }
 };