Feature - 1D Barcode generate component (#9)

* Added: jsbarcode package

* Added: barcode component

* Added: proptypes

* Added: usage comments

* Added: Option to hide text, add custom text

* Update: package line endings

* Fix: minor rendering issue

Co-authored-by: Llewellyn D'souza <lledsouza2209@gmail.com>

package.json

@@ -31,6 +31,7 @@
     "dropzone": "5.9.2",
     "flatpickr": "4.6.9",
     "formik": "^2.2.9",
+    "jsbarcode": "^3.11.5",
     "moment": "^2.29.1",
     "prop-types": "15.7.2",
     "ramda": "^0.27.2",

src/components/Barcode/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import JsBarcode from 'jsbarcode';
+import PropTypes from 'prop-types';
+
+/**
+ * Generates a barcode with the payload
+ * Ref for options: https://github.com/lindell/JsBarcode
+ * @param {{payload: string}}
+ */
+export default function Barcode({ payload, showText, text, options }) {
+  const ref = React.useRef(null);
+
+  React.useEffect(() => {
+    const canvas = document.createElement('canvas');
+    JsBarcode(canvas, payload, { displayValue: showText, text, ...options });
+    ref.current?.replaceChildren(canvas);
+  }, [ref, payload, text, options]);
+
+  return <div ref={ref}></div>;
+}
+
+Barcode.defaultProps = {
+  showText: true,
+  options: {}
+};
+
+// Typechecking props for the Breadcrumbs
+Barcode.propTypes = {
+  payload: PropTypes.string.isRequired,
+  showText: PropTypes.bool,
+  text: PropTypes.string,
+  options: PropTypes.object
+};