From 0ab94aa7a8e32ccd4e19775a60366eb6d9192d38 Mon Sep 17 00:00:00 2001
From: exuanbo <exuanbo@protonmail.com>
Date: Mon, 18 Dec 2023 18:51:09 +0000
Subject: [PATCH] docs(react): update README.md

---
 packages/react/README.md | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/react/README.md b/packages/react/README.md
index 7cb0c7e..3dad361 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -29,7 +29,7 @@ Note that, you also need to install the peer dependencies `@codemirror/state` an
 
 First create an instance with configuration as an object or a factory function:
 
-```tsx
+```ts
 import { createCodeMirror } from '@codemirror-toolkit/react'
 
 const codeMirror = createCodeMirror<HTMLDivElement>((prevState) => ({
@@ -55,10 +55,11 @@ function App() {
   useViewEffect((view) => {
     console.log('EditorView is created')
     return () => {
-      console.log('EditorView will be destroyed')
+      console.log('EditorView is destroyed')
+      // expect(view.dom.parentElement).toBeNull()
       setLastInput(view.state.doc.toString())
     }
-  }, [])
+  })
   return (
     <>
       <button onClick={() => setShowEditor(!showEditor)}>
@@ -128,7 +129,7 @@ There are only two functions exported: `createCodeMirror` and `createCodeMirrorW
 ```ts
 import type { EditorState } from '@codemirror/state'
 import type { EditorView, EditorViewConfig } from '@codemirror/view'
-import type { DependencyList, EffectCallback, MutableRefObject } from 'react'
+import type { EffectCallback, MutableRefObject } from 'react'
 
 type EditorViewConfigWithoutParentElement = Omit<EditorViewConfig, 'parent'>
 interface CodeMirrorConfig extends EditorViewConfigWithoutParentElement {}
@@ -140,8 +141,8 @@ type GetView = () => EditorView | null
 type UseViewHook = () => EditorView | null
 
 type ViewEffectCleanup = ReturnType<EffectCallback>
-type ViewEffectCallback = (view: EditorView) => ViewEffectCleanup
-type UseViewEffectHook = (effect: ViewEffectCallback, deps: DependencyList) => void
+type ViewEffectSetup = (view: EditorView) => ViewEffectCleanup
+type UseViewEffectHook = (setup: ViewEffectSetup) => void
 
 type ViewDispath = typeof EditorView.prototype.dispatch
 type UseViewDispatchHook = () => ViewDispath
@@ -171,16 +172,13 @@ function createCodeMirror<ContainerElement extends Element>(
 ### `createCodeMirrorWithContext`
 
 ```ts
-import type { ReactNode } from 'react'
+import type { FunctionComponent, PropsWithChildren } from 'react'
 
-interface CodeMirrorProviderProps {
+interface CodeMirrorProps {
   config?: ProvidedCodeMirrorConfig
-  children: ReactNode
-}
-interface CodeMirrorProvider {
-  (props: CodeMirrorProviderProps): JSX.Element
-  displayName?: string
 }
+interface CodeMirrorProviderProps extends PropsWithChildren<CodeMirrorProps> {}
+interface CodeMirrorProvider extends FunctionComponent<CodeMirrorProviderProps> {}
 
 type UseCodeMirrorContextHook<ContainerElement extends Element = Element> =
   () => CodeMirror<ContainerElement>