Skip to content

Commit 39629a0

Browse files
update readme
1 parent 0a23f18 commit 39629a0

File tree

1 file changed

+68
-7
lines changed

1 file changed

+68
-7
lines changed

README.md

Lines changed: 68 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,12 @@ React Dynamic Tabs with full API
5353
* [setTab](#setTab)
5454
* [on](#on)
5555
* [one](#one)
56-
* [off](#off)
56+
* [off](#off)
57+
* [getCopyData](#getCopyData)
5758
- [tabData](#tabData)
5859
- [Lazy Loading](#lazy-loading)
5960
- [Styling](#styling)
61+
- [Caveats](#caveats)
6062
- [Test](#test)
6163
- [License](#license)
6264

@@ -95,7 +97,10 @@ export default () => {
9597
panelComponent: ContactComponent // or can be <ContactComponent />
9698
}
9799
],
98-
selectedTabID: '1'
100+
selectedTabID: '1',
101+
onLoad: function(){
102+
// do sth here
103+
}
99104
};
100105
const [TabList, PanelList, api] = useDynTabs(options);
101106
return (
@@ -296,6 +301,8 @@ api.refresh();
296301

297302
### defaultPanelComponent
298303

304+
Default value for panelComponent option.
305+
299306
<table>
300307
<tbody>
301308
<tr>
@@ -379,7 +386,7 @@ This option assigns id attribute on panel element and text element inside the ta
379386
<tr>
380387
<td>function</td>
381388
<td>false</td>
382-
<td>This event is fired only once</td>
389+
<td>This event is fired only once, after first render</td>
383390
</tr>
384391
</tbody>
385392
</table>
@@ -407,7 +414,7 @@ This option assigns id attribute on panel element and text element inside the ta
407414
<tr>
408415
<td>function</td>
409416
<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>
411418
</tr>
412419
</tbody>
413420
</table>
@@ -435,7 +442,7 @@ This option assigns id attribute on panel element and text element inside the ta
435442
<tr>
436443
<td>function</td>
437444
<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>
439446
</tr>
440447
</tbody>
441448
</table>
@@ -599,6 +606,33 @@ This option assigns id attribute on panel element and text element inside the ta
599606
```
600607

601608

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+
602636
## Methodes
603637

604638
### isOpen
@@ -618,6 +652,8 @@ const result = api.isOpen('tab ID');
618652

619653
### open
620654

655+
triggers 'onChange', 'onInit' and 'onOpen' event.
656+
621657
Return value : Promise
622658

623659
Parameters:
@@ -660,6 +696,8 @@ const result = api.isSelected('tab ID');
660696

661697
### select
662698

699+
triggers 'onChange', 'onInit' and 'onSelect' event.
700+
663701
Return value : Promise
664702

665703
Parameters:
@@ -679,6 +717,8 @@ if( api.isSelected('your tab id') == false ){
679717

680718
### close
681719

720+
triggers 'onChange', 'onInit' and 'onClose' event.
721+
682722
Return value : Promise
683723

684724
Parameters:
@@ -698,6 +738,8 @@ if( api.isOpen('2') == true ){
698738

699739
### refresh
700740

741+
triggers onInit event.
742+
701743
Return value : Promise
702744

703745

@@ -763,8 +805,8 @@ console.log(tabData.id); // 3
763805

764806
### setTab
765807

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.
768810

769811
Return value : api
770812

@@ -844,6 +886,16 @@ const onSelectHandler = function(params){
844886
api.on('onSelect', onSelectHandler);
845887
```
846888

889+
### getCopyData
890+
891+
Return value : Object
892+
893+
**Example**
894+
895+
```js
896+
const { selectedTabID , openTabIDs } = api.getCopyData();
897+
```
898+
847899

848900
## tabData
849901

@@ -927,14 +979,23 @@ upcoming...
927979

928980

929981
## Styling
982+
930983
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.
931984

985+
932986
```js
933987
import 'react-dyn-tabs/style/react-dyn-tabs.css';
934988
import 'react-dyn-tabs/themes/default.css';
935989
```
936990

937991

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+
938999
## Test
9391000

9401001
```js

0 commit comments

Comments
 (0)