Skip to content

Commit 904039a

Browse files
awran5awran5
committed
update v2
1 parent 3ec23f7 commit 904039a

23 files changed

+5112
-5285
lines changed

‎.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎.eslintignore

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
build/
12
dist/
23
node_modules/
3-
example/node_modules/
4-
example/build/
4+
example/
5+
.snapshots/
56
*.min.js

‎.eslintrc

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎.eslintrc.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
es2021: true
5+
},
6+
extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended', 'airbnb', 'prettier'],
7+
parser: '@typescript-eslint/parser',
8+
parserOptions: {
9+
ecmaFeatures: {
10+
jsx: true
11+
},
12+
ecmaVersion: 12,
13+
sourceType: 'module'
14+
},
15+
plugins: ['react', '@typescript-eslint'],
16+
rules: {
17+
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
18+
'import/extensions': [
19+
'error',
20+
'always',
21+
{
22+
js: 'never',
23+
jsx: 'never',
24+
ts: 'never',
25+
tsx: 'never'
26+
}
27+
],
28+
'@typescript-eslint/no-unused-vars': 'error',
29+
'no-console': 0,
30+
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
31+
'no-use-before-define': 'off',
32+
'no-unused-vars': 'warn',
33+
'import/prefer-default-export': 0,
34+
'no-shadow': 1,
35+
'prefer-const': 1,
36+
'prefer-spread': 1,
37+
'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }],
38+
'no-undef': 0,
39+
'arrow-body-style': 0,
40+
'react/jsx-fragments': 0,
41+
'react/prop-types': 0,
42+
'react/require-default-props': 0,
43+
'jsx-a11y/label-has-associated-control': [
44+
'error',
45+
{
46+
required: {
47+
some: ['nesting', 'id']
48+
}
49+
}
50+
],
51+
'jsx-a11y/label-has-for': [
52+
'error',
53+
{
54+
required: {
55+
some: ['nesting', 'id']
56+
}
57+
}
58+
]
59+
},
60+
settings: {
61+
'import/resolver': {
62+
node: {
63+
extensions: ['.js', '.jsx', '.ts', '.tsx']
64+
}
65+
}
66+
}
67+
}

‎.prettierrc

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,5 @@
77
"bracketSpacing": true,
88
"jsxBracketSameLine": false,
99
"arrowParens": "always",
10-
"trailingComma": "none",
11-
"endOfLine": "auto"
10+
"trailingComma": "none"
1211
}

‎CHANGELOG.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,11 @@
22

33
- Bug fixed
44
- Edit Readme
5+
6+
## 07/31/2021
7+
8+
- Refactor to useReducer
9+
- Refactor to [bootstrap](https://getbootstrap.com/docs/5.0/components/navs-tabs/) style
10+
- Removed unnecessarily code
11+
- Added eslint with prettier config
12+
- Updated: dependencies

‎LICENSE

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2015 gatsbyjs
3+
Copyright (c) 2020-present awran5
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,63 +23,70 @@ yarn add react-simple-tabs-component
2323
## Usage
2424

2525
```jsx
26-
import React, { useState,Fragment } from 'react'
2726
import { Tabs } from 'react-simple-tabs-component'
28-
import 'react-simple-tabs-component/dist/index.css' // (Optional) Provide some basic style
27+
// (Optional) if you don't want to include bootstrap css stylesheet
28+
import 'react-simple-tabs-component/dist/index.css'
2929

3030
// Component Example
3131
const TabOne = () => {
3232
return (
33-
<Fragment>
33+
<>
3434
<h3>Tab One</h3>
3535
<p>
3636
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis sint illum iusto nostrum cumque qui
3737
voluptas tenetur inventore ut quis?
3838
</p>
39-
</Fragment>
39+
</>
4040
)
4141
}
4242

4343
// Tabs structure Array
4444
const tabs = [
4545
{
46-
label: 'Tab One', // Tab title
47-
index: 1, // Tab index
48-
Component: TabOne // Tab Component
46+
label: 'Tab One', // Tab Title - String
47+
Component: TabOne // Tab Body - JSX.Element
4948
},
5049
{
5150
label: 'Tab Two',
52-
index: 2,
5351
Component: TabTwo
5452
},
5553
{
5654
label: 'Tab Three',
57-
index: 3,
5855
Component: TabThree
5956
}
6057
]
6158

6259
export default function App() {
63-
const [selectedTab, setSelectedTab] = useState(tabs[0].index)
6460
return (
6561
<div className='App'>
6662

67-
<Tabs tabs={tabs} onClick={setSelectedTab} selectedTab={selectedTab} />
63+
<Tabs tabs={tabs} /* Props */ />
6864
</div>
6965
)
7066
```
7167
7268
### Available Props
7369
74-
| Prop | Type | Options | Description | Default |
75-
| ------------- | ---------------- | -------- | ----------------------------------------- | :--------------: |
76-
| `tabs` | Array of objects | Required | Array of objects for your Tabs | `-` |
77-
| `selectedTab` | Integer | Required | A stateful value holding the current Tab | `0` |
78-
| `onClick` | Function | Required | Function to update the current Tab | `-` |
79-
| `orientation` | String | Optional | Tab orientation `horizontal` - `vertical` | `horizontal` |
80-
| `className` | String | Optional | A className for custom styles | `tabs-component` |
70+
| Prop | Type | Options | Description | Default |
71+
| ------------- | ---------------- | -------- | ----------------------------------------- | :------------------------: |
72+
| `tabs` | Array of objects | Required | Array of objects for your Tabs | `-` |
73+
| `orientation` | String | Optional | Tab orientation `horizontal` - `vertical` | `horizontal` |
74+
| `type` | String | Optional | Tabs type `tabs` - `pills` | `tabs` |
75+
| `className` | String | Optional | A className applied to the main `div` | `bootstrap-tabs-component` |
8176
82-
### [sandbox](https://codesandbox.io/s/react-typescript-tabs-js8xi)
77+
---
78+
79+
## Style
80+
81+
The Component is based on Bootstrap 5 `HTML` structure and `CSS` classes so it will work out of the box if Bootstrap 5 css stylesheet is already included in you project. If you don't have/want to include Bootstrap, you still can use a `standalone` css stylesheet which was extracted form bootstrap 5 stylesheet. Just add it:
82+
83+
```jsx
84+
import 'react-simple-tabs-component/dist/index.css'
85+
```
86+
87+
<br />
88+
89+
[![Edit react-typescript-tabs (forked)](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-typescript-tabs-forked-0txii?fontsize=14&hidenavigation=1&theme=dark)
8390
8491
### License
8592

‎example/public/index.html

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta
7-
name="viewport"
8-
content="width=device-width, initial-scale=1, shrink-to-fit=no"
9-
/>
10-
<meta name="theme-color" content="#000000" />
11-
12-
<!--
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
8+
<meta name="theme-color" content="#000000" />
9+
10+
<!--
1311
manifest.json provides metadata used when your web app is added to the
1412
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
1513
-->
16-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15+
<!-- CSS only -->
16+
<!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
17+
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> -->
1718

18-
<!--
19+
<!--
1920
Notice the use of %PUBLIC_URL% in the tags above.
2021
It will be replaced with the URL of the `public` folder during the build.
2122
Only files inside the `public` folder can be referenced from the HTML.
@@ -24,17 +25,17 @@
2425
work correctly both with client-side routing and a non-root public URL.
2526
Learn how to configure a non-root public URL by running `npm run build`.
2627
-->
27-
<title>react-simple-star-rating</title>
28-
</head>
28+
<title>react-simple-star-rating</title>
29+
</head>
2930

30-
<body>
31-
<noscript>
32-
You need to enable JavaScript to run this app.
33-
</noscript>
31+
<body>
32+
<noscript>
33+
You need to enable JavaScript to run this app.
34+
</noscript>
3435

35-
<div id="root"></div>
36+
<div id="root"></div>
3637

37-
<!--
38+
<!--
3839
This HTML file is a template.
3940
If you open it directly in the browser, you will see an empty page.
4041
@@ -44,5 +45,6 @@
4445
To begin the development, run `npm start` or `yarn start`.
4546
To create a production bundle, use `npm run build` or `yarn build`.
4647
-->
47-
</body>
48-
</html>
48+
</body>
49+
50+
</html>

‎example/src/App.tsx

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,29 @@
1-
import React, { useState } from 'react'
21
import { Tabs } from 'react-simple-tabs-component'
32
import 'react-simple-tabs-component/dist/index.css'
43

54
import TabOne from './Components/TabOne'
65
import TabTwo from './Components/TabTwo'
76
import TabThree from './Components/TabThree'
87

9-
type TabsType = {
10-
label: string
11-
index: number
12-
Component: React.FC<{}>
13-
}[]
14-
15-
const tabs: TabsType = [
8+
const tabs = [
169
{
1710
label: 'Tab One',
18-
index: 1,
1911
Component: TabOne
2012
},
2113
{
2214
label: 'Tab Two',
23-
index: 2,
2415
Component: TabTwo
2516
},
2617
{
2718
label: 'Tab Three',
28-
index: 3,
2919
Component: TabThree
3020
}
3121
]
3222

3323
const App = () => {
34-
const [selectedTab, setSelectedTab] = useState<number>(tabs[0].index)
3524
return (
3625
<div className='App'>
37-
<Tabs selectedTab={selectedTab} tabs={tabs} onClick={setSelectedTab} />
26+
<Tabs tabs={tabs} type='pills' />
3827
</div>
3928
)
4029
}

‎example/src/Components/TabOne.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
import React, { FC, Fragment } from 'react'
2-
3-
const TabOne: FC<{}> = () => {
1+
const TabOne = () => {
42
return (
5-
<Fragment>
6-
<h1>Tab One</h1>
7-
<p>Tab One Content</p>
8-
</Fragment>
3+
<p>
4+
<strong>Tab One Content </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis sint illum
5+
iusto nostrum cumque qui voluptas tenetur inventore ut quis?
6+
</p>
97
)
108
}
119
export default TabOne

‎example/src/Components/TabThree.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
import React, { FC, Fragment } from 'react'
2-
3-
const TabThree: FC<{}> = () => {
1+
const TabThree = () => {
42
return (
5-
<Fragment>
6-
<h1>Tab Three</h1>
7-
<p>Tab Three Content</p>
8-
</Fragment>
3+
<p>
4+
<strong>Tab Three Content </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis sint
5+
illum iusto nostrum cumque qui voluptas tenetur inventore ut quis?
6+
</p>
97
)
108
}
119
export default TabThree

0 commit comments

Comments
 (0)