uiwjs / react-json-view

A React component for displaying and editing javascript arrays and JSON objects.

Home Page:https://uiwjs.github.io/react-json-view/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support of ObjectId

fberrez opened this issue · comments

Currently, there is no support of bson ObjectId. The purpose would be to implement it so it cans look like:

image

@fberrez https://codesandbox.io/embed/https-github-com-uiwjs-react-json-view-issues-19-5rhzdj?fontsize=14&hidenavigation=1&theme=dark

import React from 'react';
import JsonView from '@uiw/react-json-view';

const object = {
  _id: "ObjectId('13212hakjdhajksd')",
  uid: "test1",
  attival_time: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),
  __v: 0
}

export default function Demo() {
  return (
    <JsonView
      value={object}
      // keyName="root"
      displayObjectSize={false}
      style={{
        '--w-rjv-background-color': '#ffffff',
      }}
    >
      <JsonView.Quote render={() => <span />}/>
      <JsonView.String
        render={({ children, ...reset }, { type, value, keyName }) => {
          if (type === 'type') {
            return <span />
          }
          if (type === 'value' && /ObjectId\(['"](.*?)['"]\)/.test(value)) {
            return <span {...reset}>{children}</span>
          }
        }}
      />
      <JsonView.Date
        render={({ children, ...reset }, { type, value, keyName }) => {
          if (type === 'type') {
            return <span />
          }
        }}
      />
      <JsonView.Int
        render={({ children, ...reset }, { type, value, keyName }) => {
          if (type === 'type') {
            return <span />
          }
        }}
      />
    </JsonView>
  )
}

Looks great but it seems that I have to convert first all the ObjectId I have in my mongo document. Thank you for the tip