`s and `| `s). You can rearrange components however you'd like (for example putting the panels above the tab list). You can put components in the tab panels, not just strings!
20 |
21 | ```jsx
22 | import {
23 | TailwindTabs,
24 | TailwindTabList,
25 | TailwindTab,
26 | TailwindTabPanels,
27 | TailwindTabPanel,
28 | } from "./TailwindTabs.jsx";
29 |
30 | function SomeComponent() {
31 | return (
32 |
33 |
34 | Tab #1
35 | Tab #2
36 | Tab #3
37 |
38 |
39 | Content of Tab #1
40 |
41 |
42 |
43 | Content of Tab #3
44 |
45 |
46 | );
47 | }
48 | ```
49 |
50 | ### Single component
51 |
52 | Using this style is a bit more restricted, in that you can only pass in your data as an array with a `label` and `content`, and it generates the tabs for you.
53 |
54 | ```jsx
55 | import { TailwindComposedTabs } from "./TailwindTabs.jsx";
56 |
57 | function SomeComponent() {
58 | const tabData = [
59 | {
60 | label: "Tab #1",
61 | content: "Content of Tab #1",
62 | },
63 | {
64 | label: "Tab #2",
65 | content: ,
66 | },
67 | {
68 | label: "Tab #3",
69 | content: ,
70 | disabled: true
71 | },
72 | ];
73 |
74 | return ;
75 | }
76 | ```
77 |
78 | ## Customizing colors
79 |
80 | These are the variables you'll edit to customize the colors you want for your tabs:
81 |
82 | ```js
83 | let tabBackgroundColorClass = "bg-white";
84 | let borderColorClass = "border-pink-300";
85 | let hoverBorderColorClass = "hover:border-accent-900";
86 | let textColorClass = "text-black";
87 | let hoverTextColorClass = "hover:text-pink-600";
88 | ```
89 |
90 | ## What if I don't want to use Tailwind?
91 |
92 | Just take out the CSS classes and add your own! Tailwind isn't necessary for the logic to work. You can add whatever classes you'd like.
93 |
94 | You can also rename the components if you want. I called them this so that they wouldn't collide with any UI libraries that might already exist that have their own Tab components.
95 |
96 | ## License and credit and stuff
97 |
98 | It'd be cool if you tell me if you use this, but follow your dreams and don't let me stop you. Check out the license if your company needs to know the deets.
99 |
100 | ## Contributing
101 |
102 | I use/like this the way it is in my various projects (if I'm being honest, I open sourced it because I was lazy about sharing it to myself on different machines), so please don't add new features. If you want new features, fork it! If you wanna fix a bug or something, that's when a PR or issue would be better.
103 |
--------------------------------------------------------------------------------
/TailwindTabs.jsx:
--------------------------------------------------------------------------------
1 | // TailwindTabs by @cassidoo
2 | // github.com/cassidoo/react-tailwind-tabs
3 |
4 | import React, { useState, createContext, useContext, Children } from "react";
5 |
6 | // Customize your colors
7 | let tabBackgroundColorClass = "bg-white";
8 | let borderColorClass = "border-pink-300";
9 | let hoverBorderColorClass = "hover:border-accent-900";
10 | let textColorClass = "text-black";
11 | let hoverTextColorClass = "hover:text-pink-600";
12 |
13 | const TabsContext = createContext();
14 |
15 | function TailwindTabs({ children }) {
16 | const [activeIndex, setActiveIndex] = useState(0);
17 | return (
18 |
19 | {children}
20 |
21 | );
22 | }
23 |
24 | const TabContext = createContext();
25 |
26 | function TailwindTabList({ children }) {
27 | const wrappedChildren = Children.map(children, (child, index) => (
28 | {child}
29 | ));
30 | return (
31 |
32 | );
33 | }
34 |
35 | function TailwindTab({ children, isDisabled, ...rest }) {
36 | const index = useContext(TabContext);
37 | const { activeIndex, setActiveIndex } = useContext(TabsContext);
38 | const isActive = index === activeIndex;
39 | return (
40 | setActiveIndex(index)}
49 | key={index + "tab"}
50 | {...rest}
51 | >
52 | {children}
53 |
54 | );
55 | }
56 |
57 | function TailwindTabPanels({ children }) {
58 | const { activeIndex } = useContext(TabsContext);
59 | return {children[activeIndex]} ;
60 | }
61 |
62 | function TailwindTabPanel({ children }) {
63 | return children;
64 | }
65 |
66 | function TailwindComposedTabs({ data }) {
67 | return (
68 |
69 |
70 | {data.map((tab, i) => (
71 |
72 | {tab.label}
73 |
74 | ))}
75 |
76 |
77 | {data.map((tab, i) => (
78 |
79 | {tab.content}
80 |
81 | ))}
82 |
83 |
84 | );
85 | }
86 |
87 | export {
88 | TailwindTabs,
89 | TailwindTabList,
90 | TailwindTab,
91 | TailwindTabPanels,
92 | TailwindTabPanel,
93 | TailwindComposedTabs,
94 | };
95 |
--------------------------------------------------------------------------------
|