react-jsbarcode 0.4.2 → 1.0.1

package/Readme.md

@@ -11,9 +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
+## 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
 
@@ -40,20 +41,20 @@ pnpm add react-jsbarcode
 - Basic usage
 
 ```tsx
-import Barcode from 'react-jsbarcode';
+import { ReactBarcode } from 'react-jsbarcode';
 
 const App = () => {
-  return <Barcode value="ABC123" />;
+  return <ReactBarcode value="ABC123" />;
 };
 ```
 
 - Advanced usage
 
 ```tsx
-import Barcode from 'react-jsbarcode';
+import { ReactBarcode } from 'react-jsbarcode';
 
 const App = () => {
-  return <Barcode value="ABC123" options={{ format: 'code128' }} renderer="svg" />;
+  return <ReactBarcode value="ABC123" options={{ format: 'code128' }} renderer="svg" />;
 };
 ```
 
@@ -64,3 +65,4 @@ For all options refer jsbarcode [wiki](https://github.com/lindell/JsBarcode/wiki
 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)

package/lib/core/react-barcode.d.mts

@@ -0,0 +1,14 @@
+import { Options } from 'jsbarcode';
+import { CSSProperties } from 'react';
+import { Renderer } from '../types/index.mjs';
+
+interface ReactBarcodeProps {
+    renderer?: Renderer;
+    value: string;
+    options?: Options;
+    style?: CSSProperties;
+    className?: string;
+}
+declare function ReactBarcode({ style, className, value, options, renderer, }: Readonly<ReactBarcodeProps>): React.JSX.Element;
+
+export { ReactBarcode, type ReactBarcodeProps };

package/lib/core/react-barcode.d.ts

@@ -0,0 +1,14 @@
+import { Options } from 'jsbarcode';
+import { CSSProperties } from 'react';
+import { Renderer } from '../types/index.js';
+
+interface ReactBarcodeProps {
+    renderer?: Renderer;
+    value: string;
+    options?: Options;
+    style?: CSSProperties;
+    className?: string;
+}
+declare function ReactBarcode({ style, className, value, options, renderer, }: Readonly<ReactBarcodeProps>): React.JSX.Element;
+
+export { ReactBarcode, type ReactBarcodeProps };

package/lib/core/react-barcode.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var i = require('jsbarcode');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var i__default = /*#__PURE__*/_interopDefault(i);
+
+function R({style:r,className:t,value:a,options:c,renderer:o="svg"}){let e=react.useRef(null),n=react.useCallback(i__default.default,[a,e.current,c]);switch(react.useEffect(()=>{n(e.current,a,c);},[n,a,c,o]),o){case"canvas":return jsxRuntime.jsx("canvas",{ref:e,style:r,className:t});case"image":return jsxRuntime.jsx("img",{ref:e,alt:"barcode",style:r,className:t});default:return jsxRuntime.jsx("svg",{ref:e,style:r,className:t})}}
+
+exports.ReactBarcode = R;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb3JlL3JlYWN0LWJhcmNvZGUudHN4Il0sIm5hbWVzIjpbIkpzQmFyY29kZSIsInVzZUNhbGxiYWNrIiwidXNlRWZmZWN0IiwidXNlUmVmIiwianN4IiwiUmVhY3RCYXJjb2RlIiwic3R5bGUiLCJjbGFzc05hbWUiLCJ2YWx1ZSIsIm9wdGlvbnMiLCJyZW5kZXJlciIsImNvbnRhaW5lclJlZiIsInJlbmRlckJhcmNvZGUiXSwibWFwcGluZ3MiOiJBQUFBLE9BQU9BLE1BQWlDLFlBQ3hDLE9BQVMsZUFBQUMsRUFBYSxhQUFBQyxFQUFXLFVBQUFDLE1BQWtDLFFBc0N0RCxjQUFBQyxNQUFBLG9CQWpCTixTQUFTQyxFQUFhLENBQzNCLE1BQUFDLEVBQ0EsVUFBQUMsRUFDQSxNQUFBQyxFQUNBLFFBQUFDLEVBQ0EsU0FBQUMsT0FDRixFQUFtRCxDQUNqRCxJQUFNQyxFQUFlUixFQUFjLElBQUksRUFFakNTLEVBQWdCWCxFQUFZRCxFQUFXLENBQUNRLEVBQU9HLEVBQWEsUUFBU0YsQ0FBTyxDQUFDLEVBTW5GLE9BSkFQLEVBQVUsSUFBTSxDQUNkVSxFQUFjRCxFQUFhLFFBQVNILEVBQU9DLENBQU8sQ0FDcEQsRUFBRyxDQUFDRyxFQUFlSixFQUFPQyxFQUFTQyxDQUFRLENBQUMsRUFFcENBLEVBQVUsQ0FDaEIsSUFBSyxTQUNILE9BQU9OLEVBQUMsVUFBTyxJQUFLTyxFQUFjLE1BQU9MLEVBQU8sVUFBV0MsRUFBVyxFQUN4RSxJQUFLLFFBQ0gsT0FBT0gsRUFBQyxPQUFJLElBQUtPLEVBQWMsSUFBSSxVQUFVLE1BQU9MLEVBQU8sVUFBV0MsRUFBVyxFQUNuRixRQUNFLE9BQU9ILEVBQUMsT0FBSSxJQUFLTyxFQUFjLE1BQU9MLEVBQU8sVUFBV0MsRUFBVyxDQUN2RSxDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IEpzQmFyY29kZSwgeyB0eXBlIE9wdGlvbnMgfSBmcm9tICdqc2JhcmNvZGUnO1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlUmVmLCB0eXBlIENTU1Byb3BlcnRpZXMgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBSZW5kZXJlciB9IGZyb20gJy4uL3R5cGVzL2luZGV4LmpzJztcblxuZXhwb3J0IGludGVyZmFjZSBSZWFjdEJhcmNvZGVQcm9wcyB7XG4gIC8qKlxuICAgKiBKU0JhcmNvZGUgcmVuZGVyZXIgdHlwZVxuICAgKiBAZW51bVxuICAgKi9cbiAgcmVuZGVyZXI/OiBSZW5kZXJlcjtcbiAgLyoqXG4gICAqIFZhbHVlIHRvIGJlIHJlbmRlcmVkIGFzIGJhcmNvZGVcbiAgICovXG4gIHZhbHVlOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBKU0JhcmNvZGUgb3B0aW9uc1xuICAgKi9cbiAgb3B0aW9ucz86IE9wdGlvbnM7XG4gIHN0eWxlPzogQ1NTUHJvcGVydGllcztcbiAgY2xhc3NOYW1lPzogc3RyaW5nO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gUmVhY3RCYXJjb2RlKHtcbiAgc3R5bGUsXG4gIGNsYXNzTmFtZSxcbiAgdmFsdWUsXG4gIG9wdGlvbnMsXG4gIHJlbmRlcmVyID0gUmVuZGVyZXIuU1ZHLFxufTogUmVhZG9ubHk8UmVhY3RCYXJjb2RlUHJvcHM+KTogUmVhY3QuSlNYLkVsZW1lbnQge1xuICBjb25zdCBjb250YWluZXJSZWYgPSB1c2VSZWY8bmV2ZXI+KG51bGwpO1xuXG4gIGNvbnN0IHJlbmRlckJhcmNvZGUgPSB1c2VDYWxsYmFjayhKc0JhcmNvZGUsIFt2YWx1ZSwgY29udGFpbmVyUmVmLmN1cnJlbnQsIG9wdGlvbnNdKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHJlbmRlckJhcmNvZGUoY29udGFpbmVyUmVmLmN1cnJlbnQsIHZhbHVlLCBvcHRpb25zKTtcbiAgfSwgW3JlbmRlckJhcmNvZGUsIHZhbHVlLCBvcHRpb25zLCByZW5kZXJlcl0pO1xuXG4gIHN3aXRjaCAocmVuZGVyZXIpIHtcbiAgICBjYXNlICdjYW52YXMnOlxuICAgICAgcmV0dXJuIDxjYW52YXMgcmVmPXtjb250YWluZXJSZWZ9IHN0eWxlPXtzdHlsZX0gY2xhc3NOYW1lPXtjbGFzc05hbWV9IC8+O1xuICAgIGNhc2UgJ2ltYWdlJzpcbiAgICAgIHJldHVybiA8aW1nIHJlZj17Y29udGFpbmVyUmVmfSBhbHQ9XCJiYXJjb2RlXCIgc3R5bGU9e3N0eWxlfSBjbGFzc05hbWU9e2NsYXNzTmFtZX0gLz47XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiA8c3ZnIHJlZj17Y29udGFpbmVyUmVmfSBzdHlsZT17c3R5bGV9IGNsYXNzTmFtZT17Y2xhc3NOYW1lfSAvPjtcbiAgfVxufVxuIl19

package/lib/core/react-barcode.mjs

@@ -0,0 +1,9 @@
+import i from 'jsbarcode';
+import { useRef, useCallback, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function R({style:r,className:t,value:a,options:c,renderer:o="svg"}){let e=useRef(null),n=useCallback(i,[a,e.current,c]);switch(useEffect(()=>{n(e.current,a,c);},[n,a,c,o]),o){case"canvas":return jsx("canvas",{ref:e,style:r,className:t});case"image":return jsx("img",{ref:e,alt:"barcode",style:r,className:t});default:return jsx("svg",{ref:e,style:r,className:t})}}
+
+export { R as ReactBarcode };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb3JlL3JlYWN0LWJhcmNvZGUudHN4Il0sIm5hbWVzIjpbIkpzQmFyY29kZSIsInVzZUNhbGxiYWNrIiwidXNlRWZmZWN0IiwidXNlUmVmIiwianN4IiwiUmVhY3RCYXJjb2RlIiwic3R5bGUiLCJjbGFzc05hbWUiLCJ2YWx1ZSIsIm9wdGlvbnMiLCJyZW5kZXJlciIsImNvbnRhaW5lclJlZiIsInJlbmRlckJhcmNvZGUiXSwibWFwcGluZ3MiOiJBQUFBLE9BQU9BLE1BQWlDLFlBQ3hDLE9BQVMsZUFBQUMsRUFBYSxhQUFBQyxFQUFXLFVBQUFDLE1BQWtDLFFBc0N0RCxjQUFBQyxNQUFBLG9CQWpCTixTQUFTQyxFQUFhLENBQzNCLE1BQUFDLEVBQ0EsVUFBQUMsRUFDQSxNQUFBQyxFQUNBLFFBQUFDLEVBQ0EsU0FBQUMsT0FDRixFQUFtRCxDQUNqRCxJQUFNQyxFQUFlUixFQUFjLElBQUksRUFFakNTLEVBQWdCWCxFQUFZRCxFQUFXLENBQUNRLEVBQU9HLEVBQWEsUUFBU0YsQ0FBTyxDQUFDLEVBTW5GLE9BSkFQLEVBQVUsSUFBTSxDQUNkVSxFQUFjRCxFQUFhLFFBQVNILEVBQU9DLENBQU8sQ0FDcEQsRUFBRyxDQUFDRyxFQUFlSixFQUFPQyxFQUFTQyxDQUFRLENBQUMsRUFFcENBLEVBQVUsQ0FDaEIsSUFBSyxTQUNILE9BQU9OLEVBQUMsVUFBTyxJQUFLTyxFQUFjLE1BQU9MLEVBQU8sVUFBV0MsRUFBVyxFQUN4RSxJQUFLLFFBQ0gsT0FBT0gsRUFBQyxPQUFJLElBQUtPLEVBQWMsSUFBSSxVQUFVLE1BQU9MLEVBQU8sVUFBV0MsRUFBVyxFQUNuRixRQUNFLE9BQU9ILEVBQUMsT0FBSSxJQUFLTyxFQUFjLE1BQU9MLEVBQU8sVUFBV0MsRUFBVyxDQUN2RSxDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IEpzQmFyY29kZSwgeyB0eXBlIE9wdGlvbnMgfSBmcm9tICdqc2JhcmNvZGUnO1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlUmVmLCB0eXBlIENTU1Byb3BlcnRpZXMgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBSZW5kZXJlciB9IGZyb20gJy4uL3R5cGVzL2luZGV4LmpzJztcblxuZXhwb3J0IGludGVyZmFjZSBSZWFjdEJhcmNvZGVQcm9wcyB7XG4gIC8qKlxuICAgKiBKU0JhcmNvZGUgcmVuZGVyZXIgdHlwZVxuICAgKiBAZW51bVxuICAgKi9cbiAgcmVuZGVyZXI/OiBSZW5kZXJlcjtcbiAgLyoqXG4gICAqIFZhbHVlIHRvIGJlIHJlbmRlcmVkIGFzIGJhcmNvZGVcbiAgICovXG4gIHZhbHVlOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBKU0JhcmNvZGUgb3B0aW9uc1xuICAgKi9cbiAgb3B0aW9ucz86IE9wdGlvbnM7XG4gIHN0eWxlPzogQ1NTUHJvcGVydGllcztcbiAgY2xhc3NOYW1lPzogc3RyaW5nO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gUmVhY3RCYXJjb2RlKHtcbiAgc3R5bGUsXG4gIGNsYXNzTmFtZSxcbiAgdmFsdWUsXG4gIG9wdGlvbnMsXG4gIHJlbmRlcmVyID0gUmVuZGVyZXIuU1ZHLFxufTogUmVhZG9ubHk8UmVhY3RCYXJjb2RlUHJvcHM+KTogUmVhY3QuSlNYLkVsZW1lbnQge1xuICBjb25zdCBjb250YWluZXJSZWYgPSB1c2VSZWY8bmV2ZXI+KG51bGwpO1xuXG4gIGNvbnN0IHJlbmRlckJhcmNvZGUgPSB1c2VDYWxsYmFjayhKc0JhcmNvZGUsIFt2YWx1ZSwgY29udGFpbmVyUmVmLmN1cnJlbnQsIG9wdGlvbnNdKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHJlbmRlckJhcmNvZGUoY29udGFpbmVyUmVmLmN1cnJlbnQsIHZhbHVlLCBvcHRpb25zKTtcbiAgfSwgW3JlbmRlckJhcmNvZGUsIHZhbHVlLCBvcHRpb25zLCByZW5kZXJlcl0pO1xuXG4gIHN3aXRjaCAocmVuZGVyZXIpIHtcbiAgICBjYXNlICdjYW52YXMnOlxuICAgICAgcmV0dXJuIDxjYW52YXMgcmVmPXtjb250YWluZXJSZWZ9IHN0eWxlPXtzdHlsZX0gY2xhc3NOYW1lPXtjbGFzc05hbWV9IC8+O1xuICAgIGNhc2UgJ2ltYWdlJzpcbiAgICAgIHJldHVybiA8aW1nIHJlZj17Y29udGFpbmVyUmVmfSBhbHQ9XCJiYXJjb2RlXCIgc3R5bGU9e3N0eWxlfSBjbGFzc05hbWU9e2NsYXNzTmFtZX0gLz47XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiA8c3ZnIHJlZj17Y29udGFpbmVyUmVmfSBzdHlsZT17c3R5bGV9IGNsYXNzTmFtZT17Y2xhc3NOYW1lfSAvPjtcbiAgfVxufVxuIl19

package/lib/index.d.mts

@@ -0,0 +1,4 @@
+export { ReactBarcode, ReactBarcodeProps } from './core/react-barcode.mjs';
+export { Renderer } from './types/index.mjs';
+import 'jsbarcode';
+import 'react';

package/lib/index.d.ts

@@ -1,17 +1,4 @@
-/// <reference types="react" />
-import { Options } from 'jsbarcode';
-export declare const enum Renderer {
-    svg = "svg",
-    image = "image",
-    canvas = "canvas"
-}
-export interface ReactBarcodeProps {
-    renderer?: Renderer;
-    value: string;
-    options?: Options;
-    style?: React.CSSProperties;
-    className?: string;
-}
-export { Options };
-declare const ReactBarcode: ({ style, className, value, options, renderer }: ReactBarcodeProps) => JSX.Element;
-export default ReactBarcode;
+export { ReactBarcode, ReactBarcodeProps } from './core/react-barcode.js';
+export { Renderer } from './types/index.js';
+import 'jsbarcode';
+import 'react';