@textea/json-viewer
Advanced tools
@textea/json-viewer is a React component that can be used to view and display any kind of data, not just JSON.
Json Viewer?
ANY Data Viewer ✅
Object, Array, primitive types, and even Map and Set.@textea/json-viewer is using Material-UI as the base component library, so you need to install it and its peer dependencies first.
npm install @textea/json-viewer @mui/material @emotion/react @emotion/styled
<!doctype html>
<html lang="en">
<body>
<div id="json-viewer"></div>
<script src="https://cdn.jsdelivr.net/npm/@textea/json-viewer@3"></script>
<script>
new JsonViewer({
value: {
/* ... */
}
}).render('#json-viewer')
</script>
</body>
</html>
Here is a basic example:
import { JsonViewer } from '@textea/json-viewer'
const object = {
/* my json object */
}
const Component = () => <JsonViewer value={object} />
You can define custom data types to handle data that is not supported out of the box. Here is an example of how to display an image:
import { JsonViewer, defineDataType } from '@textea/json-viewer'
const object = {
image: 'https://i.imgur.com/1bX5QH6.jpg'
// ... other values
}
// Let's define a data type for image
const imageDataType = defineDataType({
is: (value) => typeof value === 'string' && value.startsWith('https://i.imgur.com'),
Component: (props) => <Image height={50} width={50} src={props.value} alt={props.value} />
})
const Component = () => <JsonViewer value={object} valueTypes={[imageDataType]} />
Please refer to Styling and Theming
This package is originally based on mac-s-g/react-json-view.
Also thanks open source projects that make this possible.
Netlify lets us distribute the site.
This project is licensed under the terms of the MIT license.
FAQs
Interactive Json Viewer, but not only a json viewer
The npm package @textea/json-viewer receives a total of 25,502 weekly downloads. As such, @textea/json-viewer popularity was classified as popular.
We found that @textea/json-viewer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.