Skip to content

Commit c6c9527

Browse files
committed
doc: Add example (#19)
1 parent 10393d6 commit c6c9527

File tree

1 file changed

+53
-0
lines changed

1 file changed

+53
-0
lines changed

core/README.md

+53
Original file line numberDiff line numberDiff line change
@@ -415,6 +415,59 @@ export default function Demo() {
415415
}
416416
```
417417

418+
More in-depth customization ([#19](https://github.com/uiwjs/react-json-view/issues/19))
419+
420+
```tsx mdx:preview
421+
import React from 'react';
422+
import JsonView from '@uiw/react-json-view';
423+
424+
const object = {
425+
_id: "ObjectId('13212hakjdhajksd')",
426+
uid: "test1",
427+
attival_time: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),
428+
__v: 0
429+
}
430+
431+
export default function Demo() {
432+
return (
433+
<JsonView
434+
value={object}
435+
// keyName="root"
436+
displayObjectSize={false}
437+
style={{
438+
'--w-rjv-background-color': '#ffffff',
439+
}}
440+
>
441+
<JsonView.Quote render={() => <span />}/>
442+
<JsonView.String
443+
render={({ children, ...reset }, { type, value, keyName }) => {
444+
if (type === 'type') {
445+
return <span />
446+
}
447+
if (type === 'value' && /ObjectId\(['"](.*?)['"]\)/.test(value)) {
448+
return <span {...reset}>{children}</span>
449+
}
450+
}}
451+
/>
452+
<JsonView.Date
453+
render={({ children, ...reset }, { type, value, keyName }) => {
454+
if (type === 'type') {
455+
return <span />
456+
}
457+
}}
458+
/>
459+
<JsonView.Int
460+
render={({ children, ...reset }, { type, value, keyName }) => {
461+
if (type === 'type') {
462+
return <span />
463+
}
464+
}}
465+
/>
466+
</JsonView>
467+
)
468+
}
469+
```
470+
418471
Inspector
419472

420473
```tsx mdx:preview

0 commit comments

Comments
 (0)