chore: update readme

README.md

@@ -99,6 +99,7 @@ const Component = () => {
         event.api.addPanel({
             id: 'panel1',
             component: 'default',
+            tabComponent: 'customTab', // optional custom header
             params: {
                 someProps: 'Hello',
             },
@@ -116,7 +117,7 @@ const Component = () => {
     return (
         <DockviewReact
             components={components}
-            tabComponents={headers}
+            tabComponents={headers} // optional headers renderer
             onReady={onReady}
         />
     );
@@ -131,13 +132,12 @@ const components: PanelCollection<IDockviewPanelProps> = {
         return <div>{props.params.someProps}</div>;
     },
     fancy: (props: IDockviewPanelProps) => {
-        const close = () => props.api.close();
         return (
             <DockviewComponents.Panel>
                 <DockviewComponents.Tab>
                     <div>
                         <span>{props.api.title}</span>
-                        <span onClick={close}>{'Close'}</span>
+                        <span onClick={() => props.api.close()}>{'Close'}</span>
                     </div>
                 </DockviewComponents.Tab>
                 <DockviewComponents.Content>

packages/dockview/README.md

@@ -69,16 +69,22 @@ You should also attach a dockview theme to an element containing your components
 Demonstrated below is a high level example of a `DockviewReact` component. You can follow a similar pattern for `GridviewReact`, `SplitviewReact` and `PaneviewReact` components too, see examples for more.
 
 ```tsx
-import { DockviewReact, DockviewReadyEvent, PanelCollection.IDockviewPanelProps } from 'dockview';
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    PanelCollection,
+    IDockviewPanelProps,
+    IDockviewPanelHeaderProps,
+} from 'dockview';
 
 const components: PanelCollection<IDockviewPanelProps> = {
-  default: (props: IDockviewPanelProps<{someProps: string}>) => {
-    return <div>{props.params.someProps}</div>
-  }
+    default: (props: IDockviewPanelProps<{ someProps: string }>) => {
+        return <div>{props.params.someProps}</div>;
+    },
 };
 
 const headers: PanelCollection<IDockviewPanelHeaderProps> = {
-    customHeader: (props) => {
+    customTab: (props: IDockviewPanelHeaderProps) => {
         return (
             <div>
                 <span>{props.api.title}</span>
@@ -100,7 +106,6 @@ const Component = () => {
         event.api.addPanel({
             id: 'panel2',
             component: 'default',
-            tabComponent: 'customHeader', // optional custom header
             params: {
                 someProps: 'World',
             },
@@ -108,7 +113,13 @@ const Component = () => {
         });
     };
 
-    return <DockviewReact components={components} tabComponents={headers} onReady={onReady} />;
+    return (
+        <DockviewReact
+            components={components}
+            tabComponents={headers}
+            onReady={onReady}
+        />
+    );
 };
 ```