├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── src
    ├── index.js
    ├── App.js
    ├── TabContent.js
    ├── TabPanel.js
    └── TabsDemo.js
└── .gitignore


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jacklawson-dev/mui-tab-panel-demo/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jacklawson-dev/mui-tab-panel-demo/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jacklawson-dev/mui-tab-panel-demo/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import ReactDOM from "react-dom"
2 | import { App } from "./App"
3 | 
4 | ReactDOM.render(<App />, document.getElementById("root"))
5 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { CssBaseline } from "@material-ui/core"
 3 | import { TabsDemo } from "./TabsDemo"
 4 | 
 5 | export function App() {
 6 |   return (
 7 |     <>
 8 |       <CssBaseline />
 9 |       <TabsDemo />
10 |     </>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/TabContent.js:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | export function TabContent1() {
 4 |   React.useEffect(() => {
 5 |     console.log(`mount content component 1`)
 6 |   }, [])
 7 | 
 8 |   return <span>content 1</span>
 9 | }
10 | 
11 | export function TabContent2() {
12 |   React.useEffect(() => {
13 |     console.log(`mount content component 2`)
14 |   }, [])
15 | 
16 |   return <span>content 2</span>
17 | }
18 | export function TabContent3() {
19 |   React.useEffect(() => {
20 |     console.log(`mount content component 3`)
21 |   }, [])
22 | 
23 |   return <span>content 3</span>
24 | }
25 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/TabPanel.js:
--------------------------------------------------------------------------------
 1 | import { useTabContext } from "@material-ui/lab/TabContext"
 2 | 
 3 | export function TabPanel(props) {
 4 |   const {
 5 |     children,
 6 |     className,
 7 |     style,
 8 |     value: id,
 9 |     containerProps,
10 |     ...other
11 |   } = props
12 | 
13 |   const context = useTabContext()
14 | 
15 |   if (context === null) {
16 |     throw new TypeError("No TabContext provided")
17 |   }
18 |   const tabId = context.value
19 | 
20 |   return (
21 |     <div
22 |       className={className}
23 |       style={{
24 |         width: "100%",
25 |         margin: 0,
26 |         padding: 0,
27 |         display: "flex",
28 |         ...style,
29 |         position: "absolute",
30 |         left: 0,
31 |         visibility: id === tabId ? "visible" : "hidden",
32 |       }}
33 |       {...other}
34 |     >
35 |       {children}
36 |     </div>
37 |   )
38 | }
39 | 


--------------------------------------------------------------------------------
/src/TabsDemo.js:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Tab } from "@material-ui/core"
 3 | import { TabContext, TabList } from "@material-ui/lab"
 4 | import { TabPanel } from "./TabPanel"
 5 | import { TabContent1, TabContent2, TabContent3 } from "./TabContent"
 6 | 
 7 | export function TabsDemo() {
 8 |   const [tabId, setTabId] = React.useState("tab1")
 9 |   const handleChange = (event, id) => setTabId(id)
10 | 
11 |   return (
12 |     <TabContext value={tabId}>
13 |       <TabList value={tabId} variant="standard" onChange={handleChange}>
14 |         <Tab value="tab1" label="Tab 1" />
15 |         <Tab value="tab2" label="Tab 2" />
16 |         <Tab value="tab3" label="Tab 3" />
17 |       </TabList>
18 |       <TabPanel value="tab1">
19 |         <TabContent1 />
20 |       </TabPanel>
21 |       <TabPanel value="tab2">
22 |         <TabContent2 />
23 |       </TabPanel>
24 |       <TabPanel value="tab3">
25 |         <TabContent3 />
26 |       </TabPanel>
27 |     </TabContext>
28 |   )
29 | }
30 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |   <meta name="theme-color" content="#000000" />
 9 |   <meta name="description" content="Web site created using create-react-app" />
10 |   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11 |   <!--
12 |       manifest.json provides metadata used when your web app is installed on a
13 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
14 |     -->
15 |   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16 |   <!--
17 |       Notice the use of %PUBLIC_URL% in the tags above.
18 |       It will be replaced with the URL of the `public` folder during the build.
19 |       Only files inside the `public` folder can be referenced from the HTML.
20 | 
21 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22 |       work correctly both with client-side routing and a non-root public URL.
23 |       Learn how to configure a non-root public URL by running `npm run build`.
24 |     -->
25 |   <title>MUI TabPanel demo</title>
26 | </head>
27 | 
28 | <body>
29 |   <noscript>You need to enable JavaScript to run this app.</noscript>
30 |   <div id="root"></div>
31 |   <!--
32 |       This HTML file is a template.
33 |       If you open it directly in the browser, you will see an empty page.
34 | 
35 |       You can add webfonts, meta tags, or analytics to this file.
36 |       The build step will place the bundled scripts into the <body> tag.
37 | 
38 |       To begin the development, run `npm start` or `yarn start`.
39 |       To create a production bundle, use `npm run build` or `yarn build`.
40 |     -->
41 | </body>
42 | 
43 | </html>


--------------------------------------------------------------------------------