@@ -53,10 +53,12 @@ React Dynamic Tabs with full API
53
53
* [ setTab] ( #setTab )
54
54
* [ on] ( #on )
55
55
* [ one] ( #one )
56
- * [ off] ( #off )
56
+ * [ off] ( #off )
57
+ * [ getCopyData] ( #getCopyData )
57
58
- [ tabData] ( #tabData )
58
59
- [ Lazy Loading] ( #lazy-loading )
59
60
- [ Styling] ( #styling )
61
+ - [ Caveats] ( #caveats )
60
62
- [ Test] ( #test )
61
63
- [ License] ( #license )
62
64
@@ -95,7 +97,10 @@ export default () => {
95
97
panelComponent: ContactComponent // or can be <ContactComponent />
96
98
}
97
99
],
98
- selectedTabID: ' 1'
100
+ selectedTabID: ' 1' ,
101
+ onLoad : function (){
102
+ // do sth here
103
+ }
99
104
};
100
105
const [TabList , PanelList , api ] = useDynTabs (options);
101
106
return (
@@ -296,6 +301,8 @@ api.refresh();
296
301
297
302
### defaultPanelComponent
298
303
304
+ Default value for panelComponent option.
305
+
299
306
<table >
300
307
<tbody >
301
308
<tr>
@@ -379,7 +386,7 @@ This option assigns id attribute on panel element and text element inside the ta
379
386
<tr>
380
387
<td>function</td>
381
388
<td>false</td>
382
- <td>This event is fired only once</td>
389
+ <td>This event is fired only once, after first render </td>
383
390
</tr>
384
391
</tbody >
385
392
</table >
@@ -407,7 +414,7 @@ This option assigns id attribute on panel element and text element inside the ta
407
414
<tr>
408
415
<td>function</td>
409
416
<td>false</td>
410
- <td>This event is executed after every execution of useDynTabs hook .</td>
417
+ <td>This event is triggered after every render .</td>
411
418
</tr>
412
419
</tbody >
413
420
</table >
@@ -435,7 +442,7 @@ This option assigns id attribute on panel element and text element inside the ta
435
442
<tr>
436
443
<td>function</td>
437
444
<td>false</td>
438
- <td>fires when we open|close|select a tab.</td>
445
+ <td>fires when we open|close|select a tab. this event is not fired initially </td>
439
446
</tr>
440
447
</tbody >
441
448
</table >
@@ -599,6 +606,33 @@ This option assigns id attribute on panel element and text element inside the ta
599
606
```
600
607
601
608
609
+ ### onDestroy
610
+
611
+ <table >
612
+ <tbody >
613
+ <tr>
614
+ <th>type</th>
615
+ <th>required</th>
616
+ <th>description</th>
617
+ </tr>
618
+ <tr>
619
+ <td>function</td>
620
+ <td>false</td>
621
+ <td>fires before destroying useDynTabs hook</td>
622
+ </tr>
623
+ </tbody >
624
+ </table >
625
+
626
+ ** Example**
627
+
628
+ ``` js
629
+ const [ TabList , PanelList , api ] = useDynTabs ({ onDestroy : function () {
630
+ // you can use 'this' here which refers to the api
631
+ }});
632
+ // or
633
+ api .setOption (' onDestroy' , () => { } ).refresh ();
634
+ ```
635
+
602
636
## Methodes
603
637
604
638
### isOpen
@@ -618,6 +652,8 @@ const result = api.isOpen('tab ID');
618
652
619
653
### open
620
654
655
+ triggers 'onChange', 'onInit' and 'onOpen' event.
656
+
621
657
Return value : Promise
622
658
623
659
Parameters:
@@ -660,6 +696,8 @@ const result = api.isSelected('tab ID');
660
696
661
697
### select
662
698
699
+ triggers 'onChange', 'onInit' and 'onSelect' event.
700
+
663
701
Return value : Promise
664
702
665
703
Parameters:
@@ -679,6 +717,8 @@ if( api.isSelected('your tab id') == false ){
679
717
680
718
### close
681
719
720
+ triggers 'onChange', 'onInit' and 'onClose' event.
721
+
682
722
Return value : Promise
683
723
684
724
Parameters:
@@ -698,6 +738,8 @@ if( api.isOpen('2') == true ){
698
738
699
739
### refresh
700
740
741
+ triggers onInit event.
742
+
701
743
Return value : Promise
702
744
703
745
@@ -763,8 +805,8 @@ console.log(tabData.id); // 3
763
805
764
806
### setTab
765
807
766
- set tabData by id
767
- for re-rendering immediately after this function, you should call refresh method after it.
808
+ set tabData by id.
809
+ for re-rendering immediately after this function, you should call refresh method after it.
768
810
769
811
Return value : api
770
812
@@ -844,6 +886,16 @@ const onSelectHandler = function(params){
844
886
api .on (' onSelect' , onSelectHandler);
845
887
```
846
888
889
+ ### getCopyData
890
+
891
+ Return value : Object
892
+
893
+ ** Example**
894
+
895
+ ``` js
896
+ const { selectedTabID , openTabIDs } = api .getCopyData ();
897
+ ```
898
+
847
899
848
900
## tabData
849
901
@@ -927,14 +979,23 @@ upcoming...
927
979
928
980
929
981
## Styling
982
+
930
983
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.
931
984
985
+
932
986
``` js
933
987
import ' react-dyn-tabs/style/react-dyn-tabs.css' ;
934
988
import ' react-dyn-tabs/themes/default.css' ;
935
989
```
936
990
937
991
992
+ ## Caveats
993
+
994
+ Some actions like open, select, close and refresh cause re-rendering,
995
+ and using them immediately after calling useDynTabs hook will create an infinite loop and other bugs that most likely you don't want to cause.
996
+ you should use them inside event listeners or subscriptions.
997
+
998
+
938
999
## Test
939
1000
940
1001
``` js
0 commit comments