JSON in string format shown as a link

[manuelkoch98]

Is it possible to display strings in JSON as a link?

[jaywcjlove]

https://github.com/uiwjs/react-json-view/blob/71b142db62a82cd11fa6a6c6cd98d5079d9d143b/www/src/example/default.tsx#L61

@manuelkoch98 You can handle the data into a URL object, and it will automatically become a URL connection display

[manuelkoch98]

Ok thanks for the quick feedback :) But you don't happen to have a script lying around that checks if there is a valid URL in the object and then directly makes a link out of it, but the type is a string?

[jaywcjlove]

@manuelkoch98 https://codesandbox.io/p/sandbox/nostalgic-faraday-q8h2zk?file=%2Fsrc%2FApp.js%3A19%2C32&utm_source=dotnew

import JsonView from "@uiw/react-json-view";
const example = {
  string: new URL("https://wangchujiang.com/"),
};

const example2 = {
  string: "https://wangchujiang.com/",
};

export default function App() {
  return (
    <div>
      <JsonView value={example} />
      <JsonView value={example2}>
        <JsonView.String
          render={({ children, ...reset }, { type, value, keyName }) => {
            const isURL = /^https?:\/\/.*$/i.test(value);
            if (type === "type" && isURL) {
              return <span>URL - </span>;
            }
            if (type === "value" && isURL) {
              return <a href={value}>{value}</a>;
            }
          }}
        />
      </JsonView>
    </div>
  );
}

[manuelkoch98]

Thank you very much :)