From 1df324c872ff106abc65608e12999a51f0ded29b Mon Sep 17 00:00:00 2001
From: m-shaka <buddha0818@gmail.com>
Date: Fri, 12 Sep 2025 09:21:24 +0900
Subject: [PATCH 1/2] feat: add replacer prop to convert data

---
 src/object-inspector/ObjectInspector.tsx | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/object-inspector/ObjectInspector.tsx b/src/object-inspector/ObjectInspector.tsx
index 85bd736..1768fad 100644
--- a/src/object-inspector/ObjectInspector.tsx
+++ b/src/object-inspector/ObjectInspector.tsx
@@ -9,7 +9,7 @@ import { getPropertyValue } from '../utils/propertyUtils';
 
 import { themeAcceptor } from '../styles';
 
-const createIterator = (showNonenumerable: any, sortObjectKeys: any) => {
+const createIterator = (showNonenumerable: any, sortObjectKeys: any, replacer?: (args: { name: any, data: any }) => any) => {
   const objectIterator = function* (data: any) {
     const shouldIterate = (typeof data === 'object' && data !== null) || typeof data === 'function';
     if (!shouldIterate) return;
@@ -24,12 +24,13 @@ const createIterator = (showNonenumerable: any, sortObjectKeys: any) => {
           const [k, v] = entry;
           yield {
             name: k,
-            data: v,
+            data: replacer?.({ name: k, data: v }) ?? v,
           };
         } else {
+          const name = i.toString();
           yield {
-            name: i.toString(),
-            data: entry,
+            name: name,
+            data: replacer?.({ name, data: entry }) ?? entry,
           };
         }
         i++;
@@ -46,9 +47,10 @@ const createIterator = (showNonenumerable: any, sortObjectKeys: any) => {
       for (const propertyName of keys) {
         if (propertyIsEnumerable.call(data, propertyName)) {
           const propertyValue = getPropertyValue(data, propertyName);
+          const name = propertyName || `""`;
           yield {
-            name: propertyName || `""`,
-            data: propertyValue,
+            name,
+            data: replacer?.({ name, data: propertyValue }) ?? propertyValue,
           };
         } else if (showNonenumerable) {
           // To work around the error (happens some time when propertyName === 'caller' || propertyName === 'arguments')
@@ -65,7 +67,7 @@ const createIterator = (showNonenumerable: any, sortObjectKeys: any) => {
           if (propertyValue !== undefined) {
             yield {
               name: propertyName,
-              data: propertyValue,
+              data: replacer?.({ name: propertyName, data: propertyValue }) ?? propertyValue,
               isNonenumerable: true,
             };
           }
@@ -75,9 +77,11 @@ const createIterator = (showNonenumerable: any, sortObjectKeys: any) => {
       // [[Prototype]] of the object: `Object.getPrototypeOf(data)`
       // the property name is shown as "__proto__"
       if (showNonenumerable && data !== Object.prototype /* already added */) {
+        const name = '__proto__';
+        const _data = Object.getPrototypeOf(data);
         yield {
           name: '__proto__',
-          data: Object.getPrototypeOf(data),
+          data: replacer?.({ name, data: _data }) ?? _data,
           isNonenumerable: true,
         };
       }
@@ -97,8 +101,8 @@ const defaultNodeRenderer = ({ depth, name, data, isNonenumerable }: any) =>
 /**
  * Tree-view for objects
  */
-const ObjectInspector: FC<any> = ({ showNonenumerable = false, sortObjectKeys, nodeRenderer, ...treeViewProps }) => {
-  const dataIterator = createIterator(showNonenumerable, sortObjectKeys);
+const ObjectInspector: FC<any> = ({ showNonenumerable = false, sortObjectKeys, nodeRenderer, replacer, ...treeViewProps }) => {
+  const dataIterator = createIterator(showNonenumerable, sortObjectKeys, replacer);
   const renderer = nodeRenderer ? nodeRenderer : defaultNodeRenderer;
 
   return <TreeView nodeRenderer={renderer} dataIterator={dataIterator} {...treeViewProps} />;

From 8616607ec4121c96cfa013bb10840490b9fb0c6f Mon Sep 17 00:00:00 2001
From: m-shaka <buddha0818@gmail.com>
Date: Fri, 12 Sep 2025 09:42:04 +0900
Subject: [PATCH 2/2] docs: add `replacer` to README

---
 README.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/README.md b/README.md
index 2d492ef..efdcfda 100644
--- a/README.md
+++ b/README.md
@@ -82,6 +82,25 @@ When `sortObjectKeys={true}` is provided, keys of objects are sorted in alphabet
       : <ObjectLabel name={name} data={data} isNonenumerable={isNonenumerable} />;
   ```
 
+**`replacer: PropTypes.func`:** Use a custom `replacer` to replace the object properties like `replacer` argument in `JSON.stringify` (optional)
+
+```js
+import { ObjectInspector } from 'react-inspector'
+
+const replacer = ({ data }) => {
+  // replace the array data with the first 10 elements
+  if (Array.isArray(data)) {
+    return data.slice(0, 10);
+  }
+  return data;
+}
+
+const MyComponent = ({ data }) =>
+  <div>
+    <ObjectInspector data={data} replacer={replacer} />
+  </div>
+```
+
 ### &lt;TableInspector />
 
 Like `console.table`.