Skip to content

Commit aecacf1

Browse files
harshzalavadiyaharshzalavadiya
committed
🎉 Initial Code
0 parents  commit aecacf1

13 files changed

Lines changed: 10225 additions & 0 deletions

‎.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

‎.github/workflows/nodejs.yml‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
name: NodeJS
2+
3+
on: push
4+
5+
jobs:
6+
build:
7+
runs-on: ubuntu-latest
8+
strategy:
9+
matrix:
10+
node: ["10"]
11+
name: Node ${{ matrix.node }}
12+
steps:
13+
- uses: actions/checkout@v1
14+
- name: Setup node
15+
uses: actions/setup-node@v1
16+
with:
17+
node-version: ${{ matrix.node }}
18+
19+
- name: Setup Yarn
20+
run: npm install -g yarn
21+
22+
- name: Install
23+
run: yarn install
24+
25+
- name: Build
26+
run: yarn build
27+
28+
- name: Publish
29+
if: startsWith(github.ref, 'refs/tags/')
30+
run: echo "//registry.npmjs.org/:_authToken=$NPM_AUTH_TOKEN" > ~/.npmrc && npm publish --access public
31+
env:
32+
NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

‎.gitignore‎

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

‎README.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# tiny-skeleton-loader-react
2+
3+
zero dependency, ultra lightweight (1KB gzipped) skeleton loader component for react ✨
4+
5+
![Example](preview.gif)
6+
7+
![GitHub Actions Status](https://github.com/harshzalavadiya/tiny-skeleton-loader-react/workflows/NodeJS/badge.svg)
8+
![NPM](https://img.shields.io/npm/v/tiny-skeleton-loader-react.svg)
9+
![gzip](https://badgen.net/bundlephobia/minzip/tiny-skeleton-loader-react)
10+
11+
## 🔧 Installation
12+
13+
```bash
14+
npm install --save tiny-skeleton-loader-react
15+
```
16+
17+
## 📦 Usage
18+
19+
```tsx
20+
import React from "react";
21+
22+
import SkeletonLoader from "tiny-skeleton-loader-react";
23+
24+
class Example extends React.Component {
25+
render() {
26+
return <SkeletonLoader />;
27+
}
28+
}
29+
```
30+
31+
## 👀 Properties
32+
33+
| Property | Attribute | Description | Type | Default |
34+
| -------------- | --------------- | ----------------------- | --------- | ----------- |
35+
| `width` | `width` | Loader Width | `string` | `"100%"` |
36+
| `height` | `height` | Loader Height | `string` | `"1em"` |
37+
| `background` | `background` | Loader background color | `string` | `"#eff1f6"` |
38+
| `circle` | `circle` | Make Skeleton Circle | `boolean` | `false` |
39+
| `borderRadius` | `border-radius` | Loader radius | `string` | `"4px"` |
40+
| `block` | `block` | Weather to start new | `boolean` | `false` |
41+
| `style` | `style` | Extra Styles | `object` | `{}` |
42+
43+
## License
44+
45+
MIT © [harshzalavadiya](https://github.com/harshzalavadiya)

‎package.json‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "tiny-skeleton-loader-react",
3+
"version": "1.0.0",
4+
"description": "zero dependency, ultra lightweight (1KB gzipped) skeleton loader component for react",
5+
"author": "harshzalavadiya",
6+
"license": "MIT",
7+
"repository": "harshzalavadiya/tiny-skeleton-loader-react",
8+
"main": "dist/index.js",
9+
"module": "dist/index.es.js",
10+
"jsnext:main": "dist/index.es.js",
11+
"engines": {
12+
"node": ">=8",
13+
"npm": ">=5"
14+
},
15+
"scripts": {
16+
"build": "rollup -c",
17+
"start": "rollup -c -w"
18+
},
19+
"dependencies": {},
20+
"peerDependencies": {
21+
"prop-types": "^15.7.2",
22+
"react": "^16.10.2",
23+
"react-dom": "^16.10.2"
24+
},
25+
"devDependencies": {
26+
"@types/react": "^16.9.6",
27+
"@types/react-dom": "^16.9.2",
28+
"babel-core": "^6.26.3",
29+
"babel-runtime": "^6.26.0",
30+
"cross-env": "^6.0.3",
31+
"gh-pages": "^2.1.1",
32+
"react": "^16.4.1",
33+
"react-dom": "^16.4.1",
34+
"react-scripts-ts": "^3.1.0",
35+
"rollup": "^1.24.0",
36+
"rollup-plugin-babel": "^4.3.3",
37+
"rollup-plugin-commonjs": "^10.1.0",
38+
"rollup-plugin-node-resolve": "^5.2.0",
39+
"rollup-plugin-peer-deps-external": "^2.2.0",
40+
"rollup-plugin-postcss": "^2.0.3",
41+
"rollup-plugin-typescript2": "^0.24.3",
42+
"rollup-plugin-url": "^3.0.0",
43+
"typescript": "^3.6.4"
44+
},
45+
"files": [
46+
"dist"
47+
]
48+
}

‎preview.gif‎

37.3 KB
Loading

‎rollup.config.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import commonjs from "rollup-plugin-commonjs";
2+
import resolve from "rollup-plugin-node-resolve";
3+
import external from "rollup-plugin-peer-deps-external";
4+
import postcss from "rollup-plugin-postcss";
5+
import typescript from "rollup-plugin-typescript2";
6+
import url from "rollup-plugin-url";
7+
8+
import pkg from "./package.json";
9+
10+
export default {
11+
input: "src/index.tsx",
12+
output: [
13+
{
14+
file: pkg.main,
15+
format: "cjs",
16+
exports: "named",
17+
sourcemap: true
18+
},
19+
{
20+
file: pkg.module,
21+
format: "es",
22+
exports: "named",
23+
sourcemap: true
24+
}
25+
],
26+
plugins: [
27+
external(),
28+
postcss({
29+
modules: true
30+
}),
31+
url(),
32+
resolve(),
33+
typescript({
34+
rollupCommonJSResolveHack: true,
35+
clean: true
36+
}),
37+
commonjs()
38+
]
39+
};

‎src/index.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from "react";
2+
3+
import css from "./styles.css";
4+
5+
function SkeletonLoader({
6+
width = "100%",
7+
height = "1em",
8+
background = "#eff1f6",
9+
radius = "4px",
10+
circle = false,
11+
block = false,
12+
style = {}
13+
}) {
14+
return (
15+
<>
16+
<div
17+
className={css.skeleton}
18+
style={{
19+
width,
20+
height,
21+
background,
22+
borderRadius: circle ? "50%" : radius,
23+
display: block ? "block" : "inline-block",
24+
...style
25+
}}
26+
>
27+
&zwnj;
28+
</div>
29+
</>
30+
);
31+
}
32+
33+
export default SkeletonLoader;

‎src/styles.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.skeleton {
2+
line-height: 1;
3+
display: inline-block;
4+
overflow: hidden;
5+
position: relative;
6+
background: #eff1f6;
7+
}
8+
9+
.skeleton::before {
10+
content: "";
11+
position: absolute;
12+
height: 100%;
13+
width: 500px;
14+
top: 0;
15+
left: -500px;
16+
background-image: linear-gradient(
17+
90deg,
18+
rgba(255, 255, 255, 0),
19+
rgba(255, 255, 255, 0.6),
20+
rgba(255, 255, 255, 0)
21+
);
22+
animation: skeleton-progress 1.2s ease-in-out infinite;
23+
}
24+
25+
@keyframes skeleton-progress {
26+
0% {
27+
left: -500px;
28+
}
29+
100% {
30+
left: 100%;
31+
}
32+
}

‎src/typings.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* Default CSS definition for typescript,
3+
* will be overridden with file-specific definitions by rollup
4+
*/
5+
declare module "*.css" {
6+
const content: { [className: string]: string };
7+
export default content;
8+
}

0 commit comments

Comments
 (0)