@@ -7,21 +7,105 @@ React Dynamic Tabs with full API
7
7
8
8
## Features
9
9
10
- * ** Written in React hook**
11
- * ** Open & Close & Select** — Tab can be opened, closed and selected
10
+ * ** Based on React hook**
11
+ * ** Open & Close & Select & Refresh **
12
12
* ** lazy/eager loading**
13
13
* ** Customizable style**
14
- * ** full control**
14
+ * ** Full API**
15
+ * ** Return to last used tab when closing selected tab**
16
+ * ** PanelList can be rendered outside the TabList container**
15
17
* ** ARIA accessible**
16
18
17
19
20
+ ## Table of Contents
21
+
22
+ <!-- toc -->
23
+
24
+ - [ Installation] ( #installation )
25
+ - [ Basic Example] ( #basic-example )
26
+ - [ Options] ( #options )
27
+ * [ tabs] ( #tabs )
28
+ * [ selectedTabID] ( #selectedTabID )
29
+ * [ direction] ( #direction )
30
+ * [ tabComponent] ( #tabComponent )
31
+ * [ defaultPanelComponent] ( #defaultPanelComponent )
32
+ * [ accessibility] ( #accessibility )
33
+ * [ onLoad] ( #onLoad )
34
+ * [ onInit] ( #onInit )
35
+ * [ onChange] ( #onChange )
36
+ * [ beforeSelect] ( #beforeSelect )
37
+ * [ onSelect] ( #onSelect )
38
+ * [ onOpen] ( #onOpen )
39
+ * [ beforeClose] ( #beforeClose )
40
+ * [ onClose] ( #onClose )
41
+ * [ onDestroy] ( #onDestroy )
42
+ - [ Methodes] ( #methodes )
43
+ * [ isOpen] ( #isOpen )
44
+ * [ open] ( #open )
45
+ * [ isSelected] ( #isSelected )
46
+ * [ select] ( #select )
47
+ * [ close] ( #close )
48
+ * [ refresh] ( #refresh )
49
+ * [ getOption] ( #getOption )
50
+ * [ setOption] ( #setOption )
51
+ * [ getTab] ( #getTab )
52
+ * [ setTab] ( #setTab )
53
+ * [ on] ( #on )
54
+ * [ one] ( #one )
55
+ * [ off] ( #off )
56
+ - [ tabData] ( #tabData )
57
+ - [ Lazy Loading] ( #lazyLoading )
58
+ - [ Styling] ( #styling )
59
+ - [ License] ( #license )
60
+
61
+
62
+ <!-- tocstop -->
63
+
64
+
18
65
## Installation
19
66
20
67
``` js
21
68
$ npm install react- dyn- tabs -- save
22
69
```
23
70
24
71
72
+ ## Basic Example
73
+
74
+ ``` js
75
+ import React from ' react' ;
76
+ import useDynTabs from ' react-dyn-tabs' ;
77
+ import ' react-dyn-tabs/style/react-dyn-tabs.css' ;
78
+ import ' react-dyn-tabs/themes/default.css' ;
79
+ import ContactComponent from ' ./contact-component' ;
80
+
81
+ export default () => {
82
+ const options = {
83
+ tabs : [
84
+ {
85
+ id : ' 1' ,
86
+ title : ' home' ,
87
+ closable: false ,
88
+ panelComponent : porps => < p> home content < / p>
89
+ },
90
+ {
91
+ id : ' 2' ,
92
+ title : ' contact' ,
93
+ panelComponent : ContactComponent
94
+ }
95
+ ],
96
+ selectedTabID : ' 1'
97
+ };
98
+ const [TabList , PanelList , api ] = useDynTabs (options);
99
+ return (
100
+ < div>
101
+ < TabList>< / TabList>
102
+ < PanelList>< / PanelList>
103
+ < / div>
104
+ );
105
+ };
106
+ ```
107
+
108
+
25
109
## Styling
26
110
react-dyn-tabs does not include any style loading by default. Default stylesheets and themes are provided and can be included in your application if desired.
27
111
0 commit comments