v0.2.6

Author: YYsuni

README.md

@@ -49,7 +49,7 @@ import 'react18-json-view/src/style.css'
 | `dark`                       | `boolean`                                                                 | `false`      | Keep in dark mode (Don't forget to import `dark.css`)                                                                                                                                          |
 | `theme`                      | `default` \| `a11y` \| `github` \| `vscode` \| `atom`\|`winter-is-coming` | `'default'`  | Color theme                                                                                                                                                                                    |
 | `enableClipboard`            | `boolean`                                                                 | `true`       | Whether enable clipboard feature.                                                                                                                                                              |
-| `displaySize`(canary)        | `boolean` \| `integer`  \| 'collapsed' \| 'expanded'                      | `false`      | Whether display the size of `Object`, `Array`.                                                                                                                                                 |
+| `displaySize`                | `boolean` \| `integer`  \| 'collapsed' \| 'expanded'                      | `false`      | Whether display the size of `Object`, `Array`.                                                                                                                                                 |
 | `collapseStringsAfterLength` | `integer`                                                                 | `99`         | When an integer value is assigned, strings longer than that length will be truncated and indicated by an ellipsis. To expand or collapse the string content, simply click on the string value. |
 | `collapseStringMode`         | `'directly'` \| `'word'` \|  `'address'`                                  | `'directly'` | If the `word` is assigned, the collapsed length will be adjusted to fully display the last word.(English only)                                                                                 |
 | `collapsed`                  | `boolean` \| `integer` \| `function`                                      | `false`      | When set to true(false), all nodes will be (not) collapsed by default. When using an integer value, it will collapse at a specific depth. The collapsed also can be a function.                |

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react18-json-view",
-	"version": "0.2.6-canary.3",
+	"version": "0.2.6",
 	"type": "module",
 	"description": "JSON viewer for react18",
 	"main": "dist/cjs/index.cjs",

website/src/contents/display-size.tsx

@@ -6,40 +6,24 @@ import JsonView from 'react18-json-view'
 import CopySVG from '@/svgs/copy.svg'
 import CopiedSVG from '@/svgs/copied.svg'
 
-type Option = '0' | '1' | '2' | '3' | 'true' | 'false' | 'collapsed' | 'expanded' | 'function'
+type Option = '0' | '1' | '2' | '3' | 'true' | 'false' | 'collapsed' | 'expanded'
 const options: Option[] = ['true', 'false', '0', '1', '2', '3', 'collapsed', 'expanded']
 
-const valueMap: Record<Option, any> = {
+const valueMap: Record<Option, number | boolean | 'collapsed' | 'expanded'> = {
 	'0': 0,
 	'1': 1,
 	'2': 2,
 	'3': 3,
 	true: true,
 	false: false,
 	collapsed: 'collapsed',
-	expanded: 'expanded',
-
-	function: (params: any) => {
-		if (params.indexOrName === 'arr') return true
-		if (params.depth > 3) return true
-		if (params.depth > 2 && params.size > 3) return true
-		if (params.node && typeof params.node === 'object' && params.node.nest === 'over') return true
-		return false
-	}
+	expanded: 'expanded'
 }
 
-const funcString = `(params) => {
-  if (params.indexOrName === 'arr') return true
-  if (params.depth > 3) return true
-  if (params.depth > 2 && params.size > 3) return true
-  if (params.node && typeof params.node === 'object' && params.node.nest === 'over') return true
-  return false
-}`
-
 export default function DisplaySize() {
 	const [selected, setSelected] = useState(options[0])
 
-	const code = `<JsonView src={json_object} displaySize={${selected === 'function' ? funcString : selected}} />`
+	const code = `<JsonView src={json_object} displaySize={${selected}} />`
 
 	const [copied, setCopied] = useState(false)
 
@@ -53,9 +37,7 @@ export default function DisplaySize() {
 
 	return (
 		<>
-			<h2 className='mt-20 text-lg font-medium'>
-				Display Size <span className=' opacity-40'>(canary)</span>
-			</h2>
+			<h2 className='mt-20 text-lg font-medium'>Display Size</h2>
 			<ul className='mt-3 flex select-none flex-wrap gap-1'>
 				{options.map(item => (
 					<li