Skip to content

Commit 89a33d4

Browse files
awran5awran5
committed
first commit
0 parents  commit 89a33d4

32 files changed

+23891
-0
lines changed

‎.eslintignore

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

‎.eslintrc

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"parser": "@typescript-eslint/parser",
3+
"extends": [
4+
"plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
5+
"plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
6+
"prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
7+
"plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
8+
],
9+
"env": {
10+
"node": true
11+
},
12+
"parserOptions": {
13+
"ecmaVersion": 2020,
14+
"sourceType": "module", // Allows for the use of imports
15+
"ecmaFeatures": {
16+
"legacyDecorators": true,
17+
"jsx": true
18+
}
19+
},
20+
"settings": {
21+
"react": {
22+
"version": "detect"
23+
}
24+
},
25+
"rules": {
26+
"space-before-function-paren": 0,
27+
"react/prop-types": 0,
28+
"react/jsx-handler-names": 0,
29+
"react/jsx-fragments": 0,
30+
"react/no-unused-prop-types": 0,
31+
"no-use-before-define": 0,
32+
"import/export": 0
33+
}
34+
}

‎.gitignore

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
# See https://help.github.com/ignore-files/ for more about ignoring files.
3+
4+
# dependencies
5+
node_modules
6+
example/node_modules
7+
8+
# builds
9+
build
10+
dist
11+
12+
# misc
13+
.DS_Store
14+
.env
15+
.env.local
16+
.env.development.local
17+
.env.test.local
18+
.env.production.local
19+
20+
npm-debug.log*
21+
yarn-debug.log*
22+
yarn-error.log*

‎.npmignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
src
2+
example
3+
.eslintignore
4+
.eslintrc
5+
.prettierrc
6+
tsconfig.json
7+
rollup.*

‎.prettierrc

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"singleQuote": true,
3+
"jsxSingleQuote": true,
4+
"semi": false,
5+
"tabWidth": 2,
6+
"printWidth": 120,
7+
"bracketSpacing": true,
8+
"jsxBracketSameLine": false,
9+
"arrowParens": "always",
10+
"trailingComma": "none",
11+
"endOfLine": "auto"
12+
}

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
## 10/31/2020
2+
3+
- Bug fixed
4+
- Edit Readme

‎LICENSE

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2015 gatsbyjs
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.
22+

‎README.md

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# React Simple Tabs Component
2+
3+
> A simple react component for adding accessible easy-to-use Tabs to your project.
4+
5+
[![NPM](https://img.shields.io/npm/v/react-simple-tabs-component.svg)](https://www.npmjs.com/package/react-simple-tabs-component)
6+
![npm bundle size](https://img.shields.io/bundlephobia/min/react-simple-tabs-component)
7+
![GitHub](https://img.shields.io/github/license/awran5/react-simple-tabs-component)
8+
9+
<p align="center">
10+
<img src="./screenshot.gif" alt="screenshot" width="100%" />
11+
</p>
12+
13+
## Install
14+
15+
```bash
16+
# npm
17+
npm i react-simple-tabs-component
18+
19+
# Yarn
20+
yarn add react-simple-tabs-component
21+
```
22+
23+
## Usage
24+
25+
```jsx
26+
import React, { useState } from 'react'
27+
import { Tabs } from 'react-simple-tabs-component'
28+
// (Optional) Provide some basic style
29+
import 'react-simple-tabs-component/dist/index.css'
30+
31+
// Tabs structure Array
32+
const tabs = [
33+
{
34+
label: 'Tab One', // Tab title
35+
index: 1, // Tab index
36+
Component: TabOne // Tab Component
37+
},
38+
{
39+
label: 'Tab Two',
40+
index: 2,
41+
Component: TabTwo
42+
},
43+
{
44+
label: 'Tab Three',
45+
index: 3,
46+
Component: TabThree
47+
}
48+
]
49+
50+
export default function App() {
51+
const [selectedTab, setSelectedTab] = useState(tabs[0].index)
52+
return (
53+
<div className='App'>
54+
55+
<Tabs tabs={tabs} onClick={setSelectedTab} selectedTab={selectedTab} />
56+
</div>
57+
)
58+
```
59+
60+
### Available Props
61+
62+
| Prop | Type | Options | Description | Default |
63+
| ------------- | ---------------- | -------- | ----------------------------------------- | :--------------: |
64+
| `tabs` | Array of objects | Required | Array of objects for your Tabs | `-` |
65+
| `selectedTab` | Integer | Required | A stateful value holing the current Tab | `0` |
66+
| `onClick` | Function | Required | Function to update the current Tab | `-` |
67+
| `orientation` | String | Optional | Tab orientation `horizontal` - `vertical` | `horizontal` |
68+
| `className` | String | Optional | A className for custom styles | `tabs-component` |
69+
70+
### [sandbox](https://codesandbox.io/s/react-typescript-tabs-js8xi)
71+
72+
### License
73+
74+
MIT © [awran5](https://github.com/awran5/)

‎example/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2+
3+
It is linked to the react-simple-star-rating package in the parent directory for development purposes.
4+
5+
You can run `yarn install` and then `yarn start` to test your package.

‎example/package.json

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "react-simple-tabs-component-example",
3+
"homepage": ".",
4+
"version": "0.0.0",
5+
"private": true,
6+
"scripts": {
7+
"start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
8+
"build": "node ../node_modules/react-scripts/bin/react-scripts.js build"
9+
},
10+
"dependencies": {
11+
"@types/node": "link:../node_modules/@types/node",
12+
"@types/react": "link:../node_modules/@types/react",
13+
"@types/react-dom": "link:../node_modules/@types/react-dom",
14+
"react": "link:../node_modules/react",
15+
"react-dom": "link:../node_modules/react-dom",
16+
"react-scripts": "link:../node_modules/react-scripts",
17+
"react-simple-tabs-component": "link:..",
18+
"typescript": "link:../node_modules/typescript"
19+
},
20+
"eslintConfig": {
21+
"extends": "react-app"
22+
},
23+
"browserslist": {
24+
"production": [
25+
">0.2%",
26+
"not dead",
27+
"not op_mini all"
28+
],
29+
"development": [
30+
"last 1 chrome version",
31+
"last 1 firefox version",
32+
"last 1 safari version"
33+
]
34+
}
35+
}

‎example/public/favicon.ico

3.78 KB
Binary file not shown.

‎example/public/index.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<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+
<!--
13+
manifest.json provides metadata used when your web app is added to the
14+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
15+
-->
16+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
17+
18+
<!--
19+
Notice the use of %PUBLIC_URL% in the tags above.
20+
It will be replaced with the URL of the `public` folder during the build.
21+
Only files inside the `public` folder can be referenced from the HTML.
22+
23+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24+
work correctly both with client-side routing and a non-root public URL.
25+
Learn how to configure a non-root public URL by running `npm run build`.
26+
-->
27+
<title>react-simple-star-rating</title>
28+
</head>
29+
30+
<body>
31+
<noscript>
32+
You need to enable JavaScript to run this app.
33+
</noscript>
34+
35+
<div id="root"></div>
36+
37+
<!--
38+
This HTML file is a template.
39+
If you open it directly in the browser, you will see an empty page.
40+
41+
You can add webfonts, meta tags, or analytics to this file.
42+
The build step will place the bundled scripts into the <body> tag.
43+
44+
To begin the development, run `npm start` or `yarn start`.
45+
To create a production bundle, use `npm run build` or `yarn build`.
46+
-->
47+
</body>
48+
</html>

‎example/public/manifest.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "react-simple-star-rating",
3+
"name": "react-simple-star-rating",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
}
10+
],
11+
"start_url": ".",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎example/src/App.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, { useState } from 'react'
2+
import { Tabs } from 'react-simple-tabs-component'
3+
import 'react-simple-tabs-component/dist/index.css'
4+
5+
import TabOne from './Components/TabOne'
6+
import TabTwo from './Components/TabTwo'
7+
import TabThree from './Components/TabThree'
8+
9+
type TabsType = {
10+
label: string
11+
index: number
12+
Component: React.FC<{}>
13+
}[]
14+
15+
const tabs: TabsType = [
16+
{
17+
label: 'Tab One',
18+
index: 1,
19+
Component: TabOne
20+
},
21+
{
22+
label: 'Tab Two',
23+
index: 2,
24+
Component: TabTwo
25+
},
26+
{
27+
label: 'Tab Three',
28+
index: 3,
29+
Component: TabThree
30+
}
31+
]
32+
33+
const App = () => {
34+
const [selectedTab, setSelectedTab] = useState<number>(tabs[0].index)
35+
return (
36+
<div className='App'>
37+
<Tabs selectedTab={selectedTab} tabs={tabs} onClick={setSelectedTab} />
38+
</div>
39+
)
40+
}
41+
42+
export default App

‎example/src/Components/TabOne.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React, { FC, Fragment } from 'react'
2+
3+
const TabOne: FC<{}> = () => {
4+
return (
5+
<Fragment>
6+
<h1>Tab One</h1>
7+
<p>Tab One Content</p>
8+
</Fragment>
9+
)
10+
}
11+
export default TabOne

‎example/src/Components/TabThree.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React, { FC, Fragment } from 'react'
2+
3+
const TabThree: FC<{}> = () => {
4+
return (
5+
<Fragment>
6+
<h1>Tab Three</h1>
7+
<p>Tab Three Content</p>
8+
</Fragment>
9+
)
10+
}
11+
export default TabThree

‎example/src/Components/TabTwo.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React, { FC, Fragment } from 'react'
2+
3+
const TabTwo: FC<{}> = () => {
4+
return (
5+
<Fragment>
6+
<h1>Tab Two</h1>
7+
<p>Tab Two Content</p>
8+
</Fragment>
9+
)
10+
}
11+
export default TabTwo

‎example/src/index.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
5+
'Droid Sans', 'Helvetica Neue', sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
8+
}
9+
10+
.App {
11+
font-family: sans-serif;
12+
text-align: center;
13+
width: 70vw;
14+
margin: 0 auto;
15+
}
16+
17+
h3 {
18+
margin-top: 0;
19+
}

0 commit comments

Comments
 (0)