{"id":16184986,"url":"https://github.com/rexxars/react-jason","last_synced_at":"2025-03-19T02:31:51.611Z","repository":{"id":66008634,"uuid":"296920970","full_name":"rexxars/react-jason","owner":"rexxars","description":"Render syntax-highlighted JSON data using React. Lightweight.","archived":false,"fork":false,"pushed_at":"2020-10-02T17:12:15.000Z","size":1428,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-10T16:04:04.298Z","etag":null,"topics":["json","react","syntax"],"latest_commit_sha":null,"homepage":"https://react-jason.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rexxars.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-19T17:42:44.000Z","updated_at":"2022-03-23T01:41:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"a4b56251-c5a8-4e55-b50f-d8831b4ae00f","html_url":"https://github.com/rexxars/react-jason","commit_stats":{"total_commits":39,"total_committers":1,"mean_commits":39.0,"dds":0.0,"last_synced_commit":"849ae660586c0f4f8e8835b0c7136e6fe60a341d"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rexxars%2Freact-jason","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rexxars%2Freact-jason/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rexxars%2Freact-jason/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rexxars%2Freact-jason/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rexxars","download_url":"https://codeload.github.com/rexxars/react-jason/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243960665,"owners_count":20375104,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["json","react","syntax"],"created_at":"2024-10-10T07:13:13.041Z","updated_at":"2025-03-19T02:31:51.327Z","avatar_url":"https://github.com/rexxars.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg align=\"right\" width=\"278\" height=\"392\" src=\"assets/screenshot.gif\" alt=\"react-jason screenshot\"\u003e\n\n# react-jason\n\n[![npm version](https://img.shields.io/npm/v/react-jason.svg?style=flat-square)](https://www.npmjs.com/package/react-jason)[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-jason?style=flat-square)](https://bundlephobia.com/result?p=react-jason)\n\nRender syntax-highlighted JSON data using React. Lightweight.\n\nCheck out the [demo](https://react-jason.netlify.app/) to see what it can do.\n\nYes, the name is intentional ;)\n\n## Installation\n\n```\nnpm install --save react-jason\n```\n\n## Usage\n\n```js\nimport {ReactJason} from 'react-jason'\n\nconst jsonData = {\n  type: 'author',\n  age: 34,\n  primaryGenre: null,\n  hasPublished: true,\n  tags: ['sci-fi', 'fantasy'],\n  image: {\n    url: 'https://some.url/img.png',\n  },\n}\n\nexport function YourComponent() {\n  return \u003cReactJason value={jsonData} /\u003e\n}\n```\n\n## Theming/styling\n\nWe bundle a few different themes, and defining your own styles is actually very simple. The bundled themes are the following:\n\n- An old hope classic - default (`anOldHopeClassic`)\n- GitHub (`github`)\n- Monokai (`monokai`)\n- Monokai Sublime (`monokaiSublime`)\n- VS Code Dark (`vscodeDark`)\n- VS Code Light (`vscodeLight`)\n\nTo use them, import them from `react-jason/themes`:\n\n```js\nimport {ReactJason} from 'react-jason'\nimport github from 'react-jason/themes/github'\n\nconst jsonData = {\n  /* ... */\n}\n\nexport function YourComponent() {\n  return \u003cReactJason value={jsonData} theme={github} /\u003e\n}\n```\n\nTo specify your own styles, specify a `theme` object with either a `classes` object or a `styles` object (or both). The keys represent the different node types. See [src/themes/monokai.ts](an existing theme) to figure out the available types.\n\n## Props\n\n- `value`: _any_ - The JSON data to render. This is the only required property.\n- `quoteAttributes`: _boolean_ - Whether or not to quote attributes (JSON-style) or remove them where they are not needed (like in javascript). Default is `true`.\n- `theme`: _object_ - See theming/styling section above.\n- `sortKeys`: _boolean | function_ - Whether or not to sort object keys. A custom sorting function can also be provided (same signature as `Array.prototype.sort`, but receives a third argument - the parent object being sorted)\n\n## Switching theme on dark/light mode\n\n```js\nimport {ReactJason} from 'react-jason'\nimport {vscodeLight, vscodeDark} from 'react-jason/themes'\n\nconst jsonData = {\n  /* ... */\n}\n\nexport function YourComponent() {\n  const prefersDarkMode =\n    typeof window !== 'undefined' \u0026\u0026 typeof window.matchMedia === 'function'\n      ? window.matchMedia('(prefers-color-scheme: dark)').matches\n      : false // use light theme by default?\n\n  const theme = prefersDarkMode ? vscodeDark : vscodeLight\n\n  return \u003cReactJason value={jsonData} theme={theme} /\u003e\n}\n```\n\n## What's with the name?\n\nreact-json was taken 🤷\n\n## License\n\nMIT © [Espen Hovlandsdal](https://espen.codes/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frexxars%2Freact-jason","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frexxars%2Freact-jason","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frexxars%2Freact-jason/lists"}