Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vanilla-jsoneditor
Advanced tools
vanilla-jsoneditor - npm Package Compare versions
Comparing version 0.16.1 to 0.17.0
| { | ||
| "name": "vanilla-jsoneditor", | ||
| "description": "A web-based tool to view, edit, format, transform, and validate JSON", | ||
| "version": "0.16.1", | ||
| "version": "0.17.0", | ||
| "homepage": "https://jsoneditoronline.org", | ||
@@ -11,11 +11,8 @@ "repository": { | ||
| "type": "module", | ||
| "svelte": "index.js", | ||
| "module": "index.js", | ||
| "main": "index.js", | ||
| "types": "index.d.ts", | ||
| "svelte": "./index.js", | ||
| "module": "./index.js", | ||
| "main": "./index.js", | ||
| "types": "./index.d.ts", | ||
| "sideEffects": false, | ||
| "license": "ISC", | ||
| "scripts": {}, | ||
| "dependencies": {}, | ||
| "devDependencies": {}, | ||
| "exports": { | ||
@@ -33,3 +30,9 @@ ".": "./index.js", | ||
| "./package.json": "./package.json" | ||
| } | ||
| }, | ||
| "files": [ | ||
| "*" | ||
| ], | ||
| "scripts": {}, | ||
| "dependencies": {}, | ||
| "devDependencies": {} | ||
| } |
180
README.md
@@ -35,6 +35,4 @@ # vanilla-jsoneditor | ||
| ## Use | ||
| ## Use (Browser example loading the ES module): | ||
| Browser example loading the ES module: | ||
| ```html | ||
@@ -78,4 +76,176 @@ <!DOCTYPE html> | ||
| ## Documentation | ||
| ## Use (React example, including NextJS) | ||
| For documentation, see: https://github.com/josdejong/svelte-jsoneditor | ||
| ### First, create a React component to wrap the vanilla-jsoneditor | ||
| Depending on whether you are using JavaScript of TypeScript, create either a JSX or TSX file: | ||
| ### TypeScript: | ||
| ```typescript | ||
| // | ||
| // JSONEditorReact.tsx | ||
| // | ||
| import { useEffect, useRef } from 'react' | ||
| import { JSONEditor, JSONEditorPropsOptional } from 'vanilla-jsoneditor' | ||
| const JSONEditorReact: React.FC<JSONEditorPropsOptional> = (props) => { | ||
| const refContainer = useRef<HTMLDivElement>(null) | ||
| const refEditor = useRef<JSONEditor | null>(null) | ||
| useEffect(() => { | ||
| // create editor | ||
| refEditor.current = new JSONEditor({ | ||
| target: refContainer.current!, | ||
| props: {} | ||
| }) | ||
| return () => { | ||
| // destroy editor | ||
| if (refEditor.current) { | ||
| refEditor.current.destroy() | ||
| refEditor.current = null | ||
| } | ||
| } | ||
| }, []) | ||
| useEffect(() => { | ||
| // update props | ||
| if (refEditor.current) { | ||
| refEditor.current.updateProps(props) | ||
| } | ||
| }, [props]) | ||
| return <div ref={refContainer} /> | ||
| } | ||
| export default JSONEditorReact | ||
| ``` | ||
| ### JavaScript | ||
| ```javascript | ||
| // | ||
| // JSONEditorReact.jsx | ||
| // | ||
| import { useEffect, useRef } from 'react' | ||
| import { JSONEditor, JSONEditorPropsOptional } from 'vanilla-jsoneditor' | ||
| const JSONEditorReact = (props) => { | ||
| const refContainer = useRef(null) | ||
| const refEditor = useRef(null) | ||
| useEffect(() => { | ||
| // create editor | ||
| refEditor.current = new JSONEditor({ | ||
| target: refContainer.current, | ||
| props: {} | ||
| }) | ||
| return () => { | ||
| // destroy editor | ||
| if (refEditor.current) { | ||
| refEditor.current.destroy() | ||
| refEditor.current = null | ||
| } | ||
| } | ||
| }, []) | ||
| // update props | ||
| useEffect(() => { | ||
| if (refEditor.current) { | ||
| refEditor.current.updateProps(props) | ||
| } | ||
| }, [props]) | ||
| return <div ref={refContainer} /> | ||
| } | ||
| export default JSONEditorReact | ||
| ``` | ||
| ### Import and use the React component | ||
| If you are using NextJS, you will need to use a dynamic import to only render the component in the browser (disabling server-side rendering of the wrapper), as shown below in a NextJS TypeScript example. | ||
| If you are using React in an conventional non-NextJS browser app, you can import the component using a standard import statement like `import JSONEditorReact from '../JSONEditorReact'` | ||
| ```typescript | ||
| // | ||
| // demo.tsx for use with NextJS | ||
| // | ||
| import dynamic from 'next/dynamic' | ||
| import { useCallback, useState } from 'react' | ||
| // | ||
| // In NextJS, when using TypeScript, type definitions | ||
| // can be imported from 'vanilla-jsoneditor' using a | ||
| // conventional import statement (prefixed with 'type', | ||
| // as shown below), but only types can be imported this | ||
| // way. When using NextJS, React components and helper | ||
| // functions must be imported dynamically using { ssr: false } | ||
| // as shown elsewhere in this example. | ||
| // | ||
| import type { Content, OnChangeStatus } from 'vanilla-jsoneditor' | ||
| // | ||
| // In NextJS, the JSONEditor component must be wrapped in | ||
| // a component that is dynamically in order to turn off | ||
| // server-side rendering of the component. This is neccessary | ||
| // because the vanilla-jsoneditor code attempts to use | ||
| // browser-only JavaScript capabilities not available | ||
| // during server-side rendering. Any helper functions | ||
| // provided by vanilla-jsoneditor, such as toTextContent, | ||
| // must also only be used in dynamically imported, | ||
| // ssr: false components when using NextJS. | ||
| // | ||
| const JSONEditorReact = dynamic(() => import('../JSONEditorReact'), { ssr: false }) | ||
| const TextContent = dynamic(() => import('../TextContent'), { ssr: false }) | ||
| const initialContent = { | ||
| hello: 'world', | ||
| count: 1, | ||
| foo: ['bar', 'car'] | ||
| } | ||
| export default function Demo() { | ||
| const [jsonContent, setJsonContent] = useState<Content>({ json: initialContent }) | ||
| const handler = useCallback( | ||
| (content: Content, previousContent: Content, status: OnChangeStatus) => { | ||
| setJsonContent(content) | ||
| }, | ||
| [jsonContent] | ||
| ) | ||
| return ( | ||
| <div> | ||
| <JSONEditorReact content={jsonContent} onChange={handler} /> | ||
| <TextContent content={jsonContent} /> | ||
| </div> | ||
| ) | ||
| } | ||
| ``` | ||
| ```typescript | ||
| // | ||
| // TextContent.tsx | ||
| // | ||
| // (wrapper around toTextContent for use with NextJS) | ||
| // | ||
| import { Content, toTextContent } from 'vanilla-jsoneditor' | ||
| interface IOwnProps { | ||
| content: Content | ||
| } | ||
| const TextContent = (props: IOwnProps) => { | ||
| const { content } = props | ||
| return ( | ||
| <p> | ||
| The contents of the editor, converted to a text string, are: {toTextContent(content).text} | ||
| </p> | ||
| ) | ||
| } | ||
| export default TextContent | ||
| ``` |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.39%
7848385
- Lines of code
- increased by12.06%
41375
- Number of lines in readme file
- increased by212.5%
250
No dependency changes