Skip to content

Commit 44c5dd1

Browse files
committed
docs(README.md): Add Custom Components documentation
1 parent fbdda68 commit 44c5dd1

File tree

1 file changed

+28
-1
lines changed

1 file changed

+28
-1
lines changed

README.md

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -323,10 +323,37 @@ When using the UMD version of react-tabs you can easily use the default styles b
323323
</html>
324324
```
325325
326-
### Custom
326+
327+
### Custom Style
327328
328329
You can also always just simply copy the default style to your own css/scss/less and modify it to your own needs. The changelog will always tell you when classes change and we also consider changes that break the styling as semver major.
329330
331+
### Custom Components
332+
333+
In case you want to create your own component wrapping the ones that the library provides, you have to set its `tabsRole`. This is value is used inside react-tabs to check the role of a component inside `Tabs`.
334+
335+
``` javascript
336+
import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';
337+
338+
const CustomTab = ({ children }) => (
339+
<Tab>
340+
<h1>{children}</h1>
341+
</Tab>
342+
);
343+
344+
CustomTab.tabsRosle = 'Tab'; // Required field to use your custom Tab
345+
346+
const App = () => (
347+
<Tabs>
348+
<TabList>
349+
<CustomTab>Custom Tab 1</CustomTab>
350+
<CustomTab>Custom Tab 2</CustomTab>
351+
</TabList>
352+
<TabPanel>Panel 1</TabPanel>
353+
<TabPanel>Panel 2</TabPanel>
354+
</Tabs>
355+
);
356+
```
330357
## License
331358
332359
MIT

0 commit comments

Comments
 (0)