docs: Update README and Demo for BigNumber

microlinkhq · Feb 12, 2025 · 86c14ce · 86c14ce
1 parent 98d2d1e
commit 86c14ce
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -83,7 +83,7 @@ import ReactJsonView from '@microlink/react-json-view'
 | `validationMessage`          | `string`                                         | "Validation Error"       | Custom message for validation failures to `onEdit`, `onAdd`, or `onDelete` callbacks.                                                                                                                                                                                     |
 | `displayArrayKey`            | `boolean`                                        | `true`                   | When set to `true`, the index of the elements prefix values.                                                                                                                                                                                                              |
 | `escapeStrings`              | `boolean`                                        | `true`                   | When set to `true`, strings sequences such as \n, \t, \r, \f will be escaped.                                                                                                                                                                                                          |
-| `bigNumber`                  | `BigNumber \| Decimal \| Big`                      | `null`                   | When set to a BigNumber class (from `bignumber.js`, `decimal.js` or `big.js`), numbers will be parsed and displayed using that class for high precision decimal handling.                                                                                                                |
+| `bigNumber`                  | `Class`                                          | `null`                   | A custom class for handling large numbers. The class should have a constructor that accepts a numeric string/value and a `name` property for display purposes. You can use existing libraries like `bignumber.js`, `decimal.js`, `big.js`, or provide your own implementation.                                                                                                               |
 
 #### Callbacks
 

diff --git a/dev-server/src/index.js b/dev-server/src/index.js
@@ -9,11 +9,23 @@ import Moment from 'moment'
 //import the react-json-view component (installed with npm)
 import JsonViewer from './../../src/js/index'
 
+// custom big number class, You can use existing libraries like `bignumber.js`, `decimal.js`, `big.js` etc.
+class BigNumber {
+  name = 'customName'
+  constructor(value) {
+    this.value = value
+  }
+  toString() {
+    return this.value.toString()
+  }
+}
+
 //render 2 different examples of the react-json-view component
 ReactDom.render(
   <div>
     {/* just pass in your JSON to the src attribute */}
     <JsonViewer
+      bigNumber={BigNumber}
       sortKeys
       style={{ padding: '30px', backgroundColor: 'white' }}
       src={getExampleJson1()}
@@ -59,6 +71,7 @@ ReactDom.render(
     {/* use a base16 theme */}
     <JsonViewer
       src={getExampleJson1()}
+      bigNumber={BigNumber}
       theme='railscasts'
       validationMessage="You're doing something wrong."
       collapseStringsAfterLength={15}
@@ -139,6 +152,7 @@ ReactDom.render(
     <JsonViewer
       enableClipboard={false}
       src={getExampleJson1()}
+      bigNumber={BigNumber}
       shouldCollapse={({ src, namespace, type }) =>
         namespace.indexOf('moment') > -1
       }
@@ -220,7 +234,8 @@ function getExampleJson1 () {
     string_number: '1234',
     date: new Date(),
     moment: Moment(),
-    regexp: /[0-9]/gi
+    regexp: /[0-9]/gi,
+    bigNumber: new BigNumber('0.0060254656709730629123')
   }
 }
 

diff --git a/src/js/helpers/parseInput.js b/src/js/helpers/parseInput.js
@@ -16,6 +16,7 @@ export default function parseInput (input, bigNumber) {
       input.match(/\-?\d+\.\d+/) &&
       input.match(/\-?\d+\.\d+/)[0] === input
     ) {
+      // big number
       if (bigNumber && parseFloat(input).toString() !== input) {
         return formatResponse('bigNumber', input)
       }
@@ -28,6 +29,7 @@ export default function parseInput (input, bigNumber) {
       // scientific float
       return formatResponse('float', Number(input))
     } else if (input.match(/\-?\d+/) && input.match(/\-?\d+/)[0] === input) {
+      // big number
       if (bigNumber && parseInt(input).toString() !== input) {
         return formatResponse('bigNumber', input)
       }

diff --git a/src/js/helpers/util.js b/src/js/helpers/util.js
@@ -1,5 +1,9 @@
 // returns a string "type" of input object
 export function toType (obj, bigNumber) {
+
+  /* Check if the object is an instance of the custom BigNumber class passed in as a prop
+   * If it matches, return 'bigNumber' type so it can be displayed appropriately
+   */
   if (bigNumber && obj?.constructor?.name === bigNumber?.name) {
     return 'bigNumber'
   }