Small tweaks

Author: CarlosNZ

README.md

@@ -31,6 +31,7 @@ Features include:
 - [Undo functionality](#undo-functionality)
 - [Issues, bugs, suggestions?](#issues-bugs-suggestions)
 - [Roadmap](#roadmap)
+- [Inspiration](#inspiration)
 - [Changelog](#changelog)
 
 
@@ -328,7 +329,12 @@ The main features I'd like to introduce are:
 2. **Visibility filter function** — *hide* properties from the UI completely based on a Filter function. This should arguably be done outside the component though (filter the data upstream), so would be less of a priority (though it would be fairly simple to implement, so 🤷‍♂️)
 3. **Search** — allow the user to narrow the list of visible keys with a simple search input. This would be useful for very large data objects, but is possibly getting a bit too much in terms of opinionated UI, so would need to ensure it can be styled easily. Perhaps it would be better if the "Search" input was handled outside this package, and we just accepted a "search" string prop?
 
+## Inspiration
+
+This component is heavily inspired by [react-json-view](https://github.com/mac-s-g/react-json-view), a great package that I've used in my own projects. However, it seems to have been abandoned now, and requires a few critical fixes, so I decided to create my own from scratch and extend the functionality while I was at it.
 
 ## Changelog
 
-- **0.9.0**: Initial release
+- **0.9.0**: Initial release
+- **0.9.1**: Export more Types from the package
+

demo/src/App.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 // import { JsonEditor, ThemeName, Theme, themes } from './json-edit-react/src'
+import { ThemeInput } from './json-edit-react/src'
 import { JsonEditor, ThemeName, Theme, themes } from 'json-edit-react'
 import { FaNpm, FaExternalLinkAlt, FaGithub } from 'react-icons/fa'
 import { BiReset } from 'react-icons/bi'
@@ -42,7 +43,7 @@ function App() {
   const [rootName, setRootName] = useState('data')
   const [indent, setIndent] = useState(4)
   const [collapseLevel, setCollapseLevel] = useState(2)
-  const [theme, setTheme] = useState<ThemeName>('default')
+  const [theme, setTheme] = useState<ThemeInput>('default')
   const [allowEdit, setAllowEdit] = useState(true)
   const [allowDelete, setAllowDelete] = useState(true)
   const [allowAdd, setAllowAdd] = useState(true)
@@ -76,6 +77,10 @@ function App() {
     }
   }, [selectedData, reset])
 
+  useEffect(() => {
+    if (selectedData === 'editTheme') setTheme(data)
+  }, [data])
+
   const restrictEdit: FilterFunction | boolean = (() => {
     const customRestrictor = demoData[selectedData]?.restrictEdit
     if (customRestrictor) return (input) => !allowEdit || customRestrictor(input)
@@ -115,6 +120,7 @@ function App() {
     switch (selectedData) {
       case 'editTheme':
         reset(themes[previousThemeName.current])
+        setTheme(themes[previousThemeName.current])
         return
       case 'liveData':
         setIsSaving(true)
@@ -185,7 +191,7 @@ function App() {
           indent={indent}
           onUpdate={({ newData }) => {
             setData(newData)
-            if (selectedData === 'editTheme') setTheme(newData as any)
+            if (selectedData === 'editTheme') setTheme(newData)
           }}
           collapse={collapseLevel}
           enableClipboard={

src/index.ts

@@ -1,4 +1,4 @@
 import JsonEditor from './JsonEditor'
-import { themes, ThemeName, Theme } from './theme'
+import { themes, ThemeName, Theme, ThemeInput } from './theme'
 
-export { JsonEditor, themes, type ThemeName, type Theme }
+export { JsonEditor, themes, type ThemeName, type Theme, type ThemeInput }