Skip to content

Commit 51c7455

Browse files
Update README.md
1 parent a4608e0 commit 51c7455

File tree

1 file changed

+87
-3
lines changed

1 file changed

+87
-3
lines changed

README.md

Lines changed: 87 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,105 @@ React Dynamic Tabs with full API
77

88
## Features
99

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**
1212
* **lazy/eager loading**
1313
* **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**
1517
* **ARIA accessible**
1618

1719

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+
1865
## Installation
1966

2067
```js
2168
$ npm install react-dyn-tabs --save
2269
```
2370

2471

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+
25109
## Styling
26110
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.
27111

0 commit comments

Comments
 (0)