Skip to content

Commit cf4f7ce

Browse files
adexin-teamadexin-team
committed
Initial implementation
0 parents  commit cf4f7ce

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+9840
-0
lines changed

‎.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
lib/*

‎.eslintrc.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
module.exports = {
2+
extends: ['airbnb-typescript'],
3+
parser: '@typescript-eslint/parser',
4+
plugins: ['@typescript-eslint'],
5+
rules: {
6+
'react/jsx-props-no-spreading': ['error', {
7+
html: 'ignore',
8+
}],
9+
'react/jsx-sort-props': ['error'],
10+
'import/order': ['error'],
11+
},
12+
settings: {
13+
'import/resolver': {
14+
typescript: {
15+
alwaysTryTypes: true,
16+
},
17+
},
18+
},
19+
}

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.DS_Store
2+
node_modules
3+
lib
4+
coverage

‎.travis.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
language: node_js
2+
node_js:
3+
- 12.6

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 Adexin
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.

‎README.md‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# Spinners React
2+
[![npm](https://img.shields.io/npm/v/spinners-react.svg)](http://npm.im/spinners-react) [![Build Status](https://img.shields.io/travis/adexin/spinners-react/master.svg?style=flat)](https://travis-ci.org/adexin/spinners-react) [![Coverage Status](https://coveralls.io/repos/github/adexin/spinners-react/badge.svg?branch=master)](https://coveralls.io/github/adexin/spinners-react?branch=master) [![gzip size](http://img.badgesize.io/https://unpkg.com/spinners-react/lib/umd/index.min.js?compression=gzip&label=gzip)](https://unpkg.com/spinners-react/lib/umd/index.min.js)
3+
4+
5+
9 awesome typescript-aware lightweight spinners built as react.js components.
6+
7+
<p align="center">
8+
<a href="http://adexin.github.io/spinners">
9+
<img src="https://i.imgur.com/xa7eWLW.gif" />
10+
</a>
11+
</p>
12+
13+
## Demo
14+
[View demo](https://adexin.github.io/spinners/) with examples of react.js component usage.
15+
16+
## Getting started
17+
### Installation
18+
```
19+
$ npm install spinners-react
20+
```
21+
**or** [add it directly to HTML page](#UMD-bundle-usage)
22+
23+
### Usage
24+
```
25+
import { SpinnerCircular } from 'spinners-react';
26+
27+
<SpinnerCircular />
28+
```
29+
30+
### Hide spinner
31+
```
32+
<SpinnerCircular enabled={false} />
33+
```
34+
35+
### List of components
36+
37+
| Component | Example | Component | Example | Component | Example |
38+
|-----------|---------|-----------|---------|-----------|---------|
39+
|`SpinnerCircular`|<img width="70" src="https://i.imgur.com/o89jDAP.gif" />|`SpinnerCircularFixed`| <img width="70" src="https://i.imgur.com/tTAGJCm.gif" />|`SpinnerCircularSplit`| <img width="70" src="https://i.imgur.com/bnmc9Ww.gif" />|
40+
|`SpinnerRound` |<img width="70" src="https://i.imgur.com/ankNNb4.gif" />|`SpinnerRoundOutlined`|<img width="70" src="https://i.imgur.com/EGAQ1zI.gif" />|`SpinnerRoundFilled` |<img width="70" src="https://i.imgur.com/izh0T8z.gif" />|
41+
|`SpinnerDotted` |<img width="70" src="https://i.imgur.com/PRsEM0Y.gif" />|`SpinnerInfinity` |<img width="70" src="https://i.imgur.com/gdvE3yw.gif" />|`SpinnerRomb` |<img width="70" src="https://i.imgur.com/P2lUfRy.gif" />|
42+
43+
## Properties
44+
The following optional properties are available. All extra props will be passed to the component's root SVG element.
45+
46+
| Property | Default value | Type | Description |
47+
|----------|---------------|----------------|-------------|
48+
|size |`50` |number or string|Set the size as number of pixels or any valid CSS string (e.g. `size="100%"`).|
49+
|thickness |`100` |number |Set lines width as a percentage of default thickness.|
50+
|сolor |`#38ad48` |string |Set the color. Can be set to any valid CSS string (hex, rgb, rgba).|
51+
|speed |`100` |number |Set the animation speed as a percentage of default speed.|
52+
|enabled |`true` |boolean |Show/Hide the spinner.|
53+
|still |`false` |boolean |Disable/Enable spinner animation.|
54+
|style |undefined |object |Pass CSS styles to the root SVG element|
55+
56+
## Server Side Rendering
57+
While the library works with SSR, the spinner's animation CSS will be attached to the head only on the ```hydrate``` phase, which means the spinners will start animating only after the page is fully loaded. To work around this, include the needed css in your bundle.css manually:
58+
```
59+
/* App.css */
60+
61+
/* to load animation for a specific spinner */
62+
@import "~spinners-react/lib/SpinnerCircular.css";
63+
64+
/* to load animations for all spinner at once */
65+
@import "~spinners-react/lib/index.css";
66+
```
67+
68+
## Minimizing Bundle Size
69+
The library is thin and do not rely on any style library / runtime to be used. To reduce the bundle size even more load only the used components.
70+
If you're using ES6 modules and a bundler that supports tree-shaking you can safely use named imports:
71+
```
72+
import { SpinnerCircular } from 'spinners-react';
73+
```
74+
It that's not the case you're able to use path imports to avoid pulling in unused spinners:
75+
```
76+
// ESM
77+
import { SpinnerCircular } from 'spinners-react/lib/esm/SpinnerCircular';
78+
// or CJS
79+
import { SpinnerCircular } from 'spinners-react/lib/cjs/SpinnerCircular';
80+
// or UMD
81+
import { SpinnerCircular } from 'spinners-react/lib/umd/SpinnerCircular';
82+
83+
```
84+
85+
## UMD bundle usage
86+
```
87+
<!doctype html>
88+
<html>
89+
<head>
90+
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
91+
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
92+
<!-- to load a specific spinner -->
93+
<script src="https://unpkg.com/spinners-react/lib/umd/SpinnerCircular.min.js"></script>
94+
<!-- to load all spinners at once -->
95+
<script src="https://unpkg.com/spinners-react/lib/umd/index.min.js"></script>
96+
</head>
97+
98+
<body>
99+
<div id="root"></div>
100+
<script>
101+
ReactDOM.render(
102+
React.createElement(SpinnersReact.SpinnerCircular),
103+
document.getElementById('root')
104+
);
105+
</script>
106+
</body>
107+
</html>
108+
```
109+
110+
## Browsers support
111+
112+
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br> Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Opera |
113+
| --------- | --------- | --------- | --------- | --------- |
114+
| Edge 80+| last 2 versions| last 2 versions| last 2 versions| last 2 versions
115+
116+
## Issues and Bugs
117+
118+
Let us know if you [found a bug](https://github.com/adexin/spinners-react/issues)!
119+
120+
## Support and Contact
121+
122+
Have a quick question or need some help? Please do not hesitate to contact us via email at info@adexin.com.
123+
124+
## Credits
125+
126+
This component is developed by consulting agency [Adexin](https://adexin.com/).
127+
128+
## License
129+
130+
Spinners React is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.

‎jest.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
preset: 'ts-jest',
3+
testEnvironment: 'node',
4+
transform: {
5+
'^.+\\.css$': 'jest-transform-css',
6+
},
7+
};

‎package.json‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
{
2+
"name": "spinners-react",
3+
"version": "0.0.4",
4+
"description": "Spinners collection to use with React",
5+
"sideEffects": [
6+
"src/*.css"
7+
],
8+
"main": "lib/umd/index.js",
9+
"module": "lib/esm/index.js",
10+
"types": "lib/esm/index.d.ts",
11+
"scripts": {
12+
"prepare": "npm run lint && npm run build",
13+
"prebuild": "rimraf lib/*",
14+
"build": "rollup -c --configProd",
15+
"start": "rollup -c -w",
16+
"lint": "eslint --fix --ext .js,.jsx,.ts,.tsx ./",
17+
"test": "jest --coverage --coverageReporters=text-lcov | coveralls"
18+
},
19+
"files": [
20+
"lib"
21+
],
22+
"keywords": [
23+
"React",
24+
"Spinner"
25+
],
26+
"repository": {
27+
"type": "git",
28+
"url": "https://github.com/adexin/spinners-react.git"
29+
},
30+
"author": "Adexin",
31+
"license": "MIT",
32+
"devDependencies": {
33+
"@types/jest": "^24.0.25",
34+
"@types/react-test-renderer": "^16.9.1",
35+
"@typescript-eslint/eslint-plugin": "^2.14.0",
36+
"@typescript-eslint/parser": "^2.14.0",
37+
"coveralls": "^3.0.9",
38+
"css-loader": "^3.4.0",
39+
"eslint": "^6.8.0",
40+
"eslint-config-airbnb-typescript": "^6.3.1",
41+
"eslint-import-resolver-typescript": "^2.0.0",
42+
"eslint-plugin-import": "^2.19.1",
43+
"eslint-plugin-jsx-a11y": "^6.2.3",
44+
"eslint-plugin-react": "^7.17.0",
45+
"eslint-plugin-react-hooks": "^2.3.0",
46+
"glob": "^7.1.6",
47+
"jest": "^24.9.0",
48+
"jest-transform-css": "^2.0.0",
49+
"react": "^16.12.0",
50+
"react-dom": "^16.12.0",
51+
"react-test-renderer": "^16.12.0",
52+
"rollup": "^1.28.0",
53+
"rollup-plugin-commonjs": "^10.1.0",
54+
"rollup-plugin-copy-glob": "^0.3.1",
55+
"rollup-plugin-delete": "^1.2.0",
56+
"rollup-plugin-eslint": "^7.0.0",
57+
"rollup-plugin-node-resolve": "^5.2.0",
58+
"rollup-plugin-postcss": "^2.0.3",
59+
"rollup-plugin-terser": "^5.1.3",
60+
"rollup-plugin-ts": "^1.2.2",
61+
"source-map-loader": "^0.2.4",
62+
"style-inject": "^0.3.0",
63+
"style-loader": "^1.1.2",
64+
"ts-jest": "^24.2.0",
65+
"ts-loader": "^6.2.1",
66+
"tslib": "^1.10.0",
67+
"typescript": "^3.7.4"
68+
},
69+
"peerDependencies": {
70+
"@types/react": "^16.8.0",
71+
"@types/react-dom": "^16.8.0",
72+
"react": "^16.8.0",
73+
"react-dom": "^16.8.0"
74+
},
75+
"dependencies": {}
76+
}

‎rollup.config.js‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import glob from 'glob';
2+
import commonjs from 'rollup-plugin-commonjs';
3+
import del from 'rollup-plugin-delete';
4+
import copy from 'rollup-plugin-copy-glob';
5+
import resolve from 'rollup-plugin-node-resolve';
6+
import postcss from 'rollup-plugin-postcss';
7+
import { terser } from 'rollup-plugin-terser';
8+
import typescript from 'rollup-plugin-ts';
9+
import path from 'path';
10+
import { promisify } from 'util';
11+
12+
const globAsync = promisify(glob);
13+
const terse = terser({ output: { comments: false } });
14+
const shared = {
15+
plugins: [
16+
typescript(),
17+
commonjs(),
18+
resolve(),
19+
postcss({
20+
inject: true,
21+
minimize: true,
22+
}),
23+
],
24+
external: [
25+
'react',
26+
'react-dom',
27+
],
28+
output: {
29+
globals: {
30+
react: 'React',
31+
'react-dom': 'ReactDOM',
32+
},
33+
},
34+
};
35+
36+
export default (args) => globAsync(path.join('src', '*.tsx'))
37+
.then((files) => {
38+
const inputs = args.configProd
39+
? files.reduce((acc, f) => ({
40+
...acc,
41+
[path.basename(f, path.extname(f))]: f,
42+
}), { index: 'src/index.ts' })
43+
: [];
44+
45+
return [
46+
...Object.values(inputs).map((input) => ({
47+
input,
48+
output: [{
49+
dir: 'lib/css',
50+
format: 'es',
51+
}],
52+
external: shared.external,
53+
plugins: [
54+
typescript({ tsconfig: (resolvedConfig) => ({ ...resolvedConfig, declaration: false }) }),
55+
commonjs(),
56+
resolve(),
57+
postcss({ extract: true }),
58+
],
59+
})),
60+
...Object.values(inputs).map((input) => ({
61+
input,
62+
output: [{
63+
file: `lib/css/${path.basename(input, path.extname(input))}.min${path.extname(input)}`,
64+
format: 'es',
65+
}],
66+
external: shared.external,
67+
plugins: [
68+
typescript({ tsconfig: (resolvedConfig) => ({ ...resolvedConfig, declaration: false }) }),
69+
commonjs(),
70+
resolve(),
71+
postcss({
72+
extract: true,
73+
minimize: true,
74+
}),
75+
copy([{ files: 'lib/css/*.css', dest: 'lib' }]),
76+
],
77+
})),
78+
{
79+
input: {
80+
index: 'src/index.ts',
81+
...inputs,
82+
},
83+
...shared,
84+
output: [{
85+
dir: 'lib/esm',
86+
format: 'es',
87+
}, {
88+
dir: 'lib/cjs',
89+
format: 'cjs',
90+
}],
91+
},
92+
...Object.keys(inputs).map((name) => ({
93+
input: inputs[name],
94+
...shared,
95+
output: {
96+
file: `lib/umd/${name}.js`,
97+
format: 'umd',
98+
name: 'SpinnersReact',
99+
esModule: false,
100+
globals: shared.output.globals,
101+
},
102+
})),
103+
...Object.keys(inputs).map((name) => ({
104+
input: inputs[name],
105+
output: {
106+
file: `lib/umd/${name}.min.js`,
107+
format: 'umd',
108+
name: 'SpinnersReact',
109+
esModule: false,
110+
sourcemap: true,
111+
globals: shared.output.globals,
112+
},
113+
external: shared.external,
114+
plugins: [
115+
...shared.plugins,
116+
terse,
117+
del({ targets: 'lib/css' }),
118+
],
119+
})),
120+
];
121+
});

‎src/SpinnerCircular.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@keyframes spinners-react-circular {
2+
0% { stroke-dashoffset: 306; }
3+
50% { stroke-dasharray: 40, 134; }
4+
100% {
5+
stroke-dasharray: 1, 174;
6+
stroke-dashoffset: 132;
7+
}
8+
}

0 commit comments

Comments
 (0)