diff --git a/.changeset/kind-brooms-admire.md b/.changeset/kind-brooms-admire.md
new file mode 100644
index 0000000..4f56442
--- /dev/null
+++ b/.changeset/kind-brooms-admire.md
@@ -0,0 +1,5 @@
+---
+"@cloudwalker/react-inspect": patch
+---
+
+Convert all internal components to function components
diff --git a/packages/react-inspect/src/components/DataHandler/DataHandler.tsx b/packages/react-inspect/src/components/DataHandler/DataHandler.tsx
index 6143ab8..051911b 100644
--- a/packages/react-inspect/src/components/DataHandler/DataHandler.tsx
+++ b/packages/react-inspect/src/components/DataHandler/DataHandler.tsx
@@ -1,114 +1,101 @@
-import {Component} from 'react'
-
import {CollapseHandler} from '../CollapseHandler'
import {Key} from '../Key'
import {Level} from '../Level'
import {Punctuation} from '../Punctuation'
import {Value} from '../Value'
-export class DataHandler extends Component<{
- theme?: 'gloom' | 'default'
+export function DataHandler({
+ data,
+ outer = false,
+ theme = 'default',
+}: {
data: unknown
- outer: boolean
-}> {
- static displayName = 'ReactInspectDataHandler'
- static defaultProps = {
- outer: false,
+ outer?: boolean
+ theme?: 'gloom' | 'default'
+}) {
+ if (typeof data == 'string') {
+ return {`"${data}"`}
}
- render() {
- const {data, outer, theme = 'default'} = this.props
-
- if (typeof data == 'string') {
- return {`"${data}"`}
- }
-
- if (typeof data == 'number') {
- return {`${data}`}
- }
-
- if (typeof data == 'function') {
- const value = (
-
- {String(data).trim()}
-
- )
+ if (typeof data == 'number') {
+ return {`${data}`}
+ }
- if (outer) {
- return value
- }
+ if (typeof data == 'function') {
+ const value = (
+
+ {String(data).trim()}
+
+ )
- return (
-
- {(show) =>
- show ? value : {...value, props: {...value.props, children: 'fn'}}
- }
-
- )
+ if (outer) {
+ return value
}
- if (Array.isArray(data)) {
- const value = data.map((x, i) => (
-
-
-
- ))
+ return (
+
+ {(show) =>
+ show ? value : {...value, props: {...value.props, children: 'fn'}}
+ }
+
+ )
+ }
- return (
-
- {'['}
- {outer ? (
- value
- ) : (
-
- {(show) =>
- show ? (
- <>{value}>
- ) : (
- ...
- )
- }
-
- )}
- {']'}
-
- )
- }
+ if (Array.isArray(data)) {
+ const value = data.map((x, i) => (
+
+
+
+ ))
- if (isRecord(data)) {
- const value = Object.keys(data).map((x) => (
-
- {x}
- :{' '}
-
-
- ))
+ return (
+
+ {'['}
+ {outer ? (
+ value
+ ) : (
+
+ {(show) =>
+ show ? <>{value}> : ...
+ }
+
+ )}
+ {']'}
+
+ )
+ }
- return (
-
- {'{'}
- {outer ? (
- value
- ) : (
-
- {(show) =>
- show ? (
- <>{value}>
- ) : (
- ...
- )
- }
-
- )}
- {'}'}
-
- )
- }
+ if (isRecord(data)) {
+ const value = Object.keys(data).map((x) => (
+
+ {x}
+ :{' '}
+
+
+ ))
- return {`${data}`}
+ return (
+
+ {'{'}
+ {outer ? (
+ value
+ ) : (
+
+ {(show) =>
+ show ? <>{value}> : ...
+ }
+
+ )}
+ {'}'}
+
+ )
}
+
+ return {`${data}`}
}
+DataHandler.displayName = 'ReactInspectDataHandler'
+
function isRecord(data: unknown): data is Record {
return data != null && typeof data == 'object'
}
diff --git a/packages/react-inspect/src/main.ts b/packages/react-inspect/src/main.ts
index 883151c..50c3ce3 100644
--- a/packages/react-inspect/src/main.ts
+++ b/packages/react-inspect/src/main.ts
@@ -1 +1 @@
-export {Inspect} from './components/ReactInspect'
+export {Inspect} from './components/Inspect'