uiwjs / react-json-view

A React component for displaying and editing javascript arrays and JSON objects.
https://uiwjs.github.io/react-json-view/
MIT License
188 stars 11 forks source link

How to show the string with scaped values (normal new lines, quotes, etc)? #412 #18

Open MiniSuperDev opened 11 months ago

MiniSuperDev commented 11 months ago

Like this viewer, when the string values show the string with scaped values image Thanks

jaywcjlove commented 11 months ago

@MiniSuperDev Reference example: https://codesandbox.io/embed/intelligent-water-4qw3m3?fontsize=14&hidenavigation=1&theme=dark

import JsonView from "@uiw/react-json-view";

const object = {
  avatar: '"line"\nline2\nline2\nline2\n"line"',
  string: "Lorem ipsum dolor sit amet"
};

export default function App() {
  return (
    <div className="App">
      <JsonView value={object} keyName="root">
        <JsonView.String
          render={({ children, style, ...reset }, { type, value }) => {
            console.log("value", value, reset);
            if (type === "value") {
              return (
                <pre {...reset} style={{ ...style, paddingLeft: 43 }}>
                  {value}
                </pre>
              );
            }
          }}
        />
      </JsonView>
    </div>
  );
}