react-json-view icon indicating copy to clipboard operation
react-json-view copied to clipboard

Support of ObjectId

Open fberrez opened this issue 2 years ago • 2 comments

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

image

fberrez avatar Oct 27 '23 14:10 fberrez

@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>
  )
}

jaywcjlove avatar Oct 27 '23 14:10 jaywcjlove

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

fberrez avatar Oct 27 '23 20:10 fberrez