├── .all-contributorsrc
├── .codesandbox
└── tasks.json
├── .devcontainer
└── .devcontainer.json
├── .eslintrc.cjs
├── .gitignore
├── .prettierignore
├── .prettierrc.js
├── README.md
├── _third-parts
└── react-sketch
│ ├── LICENSE
│ ├── README.md
│ └── src
│ ├── SketchField.jsx
│ ├── arrow.js
│ ├── circle.js
│ ├── fabrictool.js
│ ├── history.js
│ ├── index.js
│ ├── line.js
│ ├── pan.js
│ ├── pencil.js
│ ├── rectangle.js
│ ├── select.js
│ ├── tools.js
│ └── utils.js
├── index.html
├── package.json
├── pnpm-lock.yaml
├── src
├── App.jsx
├── Gallery
│ ├── index.jsx
│ ├── insertYourLoaderHere
│ │ ├── AmazonLoader.jsx
│ │ ├── Article.jsx
│ │ ├── ArticleLoader.jsx
│ │ ├── AuthorsList.jsx
│ │ ├── AvatarWithText.jsx
│ │ ├── BarChart.jsx
│ │ ├── BlogItem.jsx
│ │ ├── BootstrapCardDataTable.jsx
│ │ ├── BulletList.jsx
│ │ ├── CalendarEventLoader.jsx
│ │ ├── CalloutStripLoader.jsx
│ │ ├── Card.jsx
│ │ ├── CardList.jsx
│ │ ├── Catalog.jsx
│ │ ├── CatalogMagic.jsx
│ │ ├── CategoryLoader.jsx
│ │ ├── Chat.jsx
│ │ ├── ChatGPT.jsx
│ │ ├── CheckboxList.jsx
│ │ ├── ClassicPostLoader.jsx
│ │ ├── CleanChat.jsx
│ │ ├── CleoOne.jsx
│ │ ├── Code.jsx
│ │ ├── CustomerTestimonial.jsx
│ │ ├── DashboardLoader.jsx
│ │ ├── DataList.jsx
│ │ ├── DataTable.jsx
│ │ ├── DevtoCard.jsx
│ │ ├── DiscordLoader.jsx
│ │ ├── DoorDashFavorite.jsx
│ │ ├── EcommerceProduct.jsx
│ │ ├── EventsLoader.jsx
│ │ ├── Facebook.jsx
│ │ ├── FadingLoader.jsx
│ │ ├── Form.jsx
│ │ ├── ForumPost.jsx
│ │ ├── GithubProfile.jsx
│ │ ├── GlobalSidebar.jsx
│ │ ├── Gmail.jsx
│ │ ├── GoogleMap.jsx
│ │ ├── Grid.jsx
│ │ ├── HackerNewsLoader.jsx
│ │ ├── HeadBodyGrid.jsx
│ │ ├── HeaderLoader.jsx
│ │ ├── HelpLinksLoader.jsx
│ │ ├── HistoriesLoader.jsx
│ │ ├── HomePage.jsx
│ │ ├── ImageGrid.jsx
│ │ ├── ImageList.jsx
│ │ ├── ImageUpload.jsx
│ │ ├── InstaChatlist.jsx
│ │ ├── InstaStories.jsx
│ │ ├── Instagram.jsx
│ │ ├── Invoice.jsx
│ │ ├── LinkedIn.jsx
│ │ ├── LinkedinFeed.jsx
│ │ ├── ListingWithThumbnail.jsx
│ │ ├── Medium.jsx
│ │ ├── NestedList.jsx
│ │ ├── Netflix.jsx
│ │ ├── NewFacebook.jsx
│ │ ├── News.jsx
│ │ ├── NotificationLoader.jsx
│ │ ├── PieChart.jsx
│ │ ├── ProductDetails.jsx
│ │ ├── ProfileCard.jsx
│ │ ├── ProfileShow.jsx
│ │ ├── ReactTable.jsx
│ │ ├── Reddit.jsx
│ │ ├── RepeatableTableRows.jsx
│ │ ├── ResponsiveArticle.jsx
│ │ ├── ResponsiveProduct.jsx
│ │ ├── RotatingGallery.jsx
│ │ ├── ShoppingLoader.jsx
│ │ ├── Sidebar.jsx
│ │ ├── SnapchatThread.jsx
│ │ ├── Table.jsx
│ │ ├── TableLoader.jsx
│ │ ├── TaskList.jsx
│ │ ├── ThreeDots.jsx
│ │ ├── Twitter.jsx
│ │ ├── UpworkJobLoader.jsx
│ │ ├── UserReviewSkype.jsx
│ │ ├── XYChart.jsx
│ │ ├── Youtube.jsx
│ │ ├── YoutubeFresh.jsx
│ │ ├── YoutubeMagic.jsx
│ │ └── index.jsx
│ └── style.css
├── assets
│ ├── background-asset.png
│ ├── circle.svg
│ ├── clone.svg
│ ├── favicon.png
│ ├── grid.svg
│ ├── help.svg
│ ├── react.svg
│ ├── rect.svg
│ ├── select.svg
│ ├── trash.svg
│ └── vue.svg
├── components
│ ├── Canvas.jsx
│ ├── Config.jsx
│ ├── Highlighter.jsx
│ ├── Layout
│ │ └── Header.jsx
│ ├── LearnMore.tsx
│ ├── Loading.jsx
│ ├── SEO.jsx
│ ├── Upload
│ │ ├── Upload.jsx
│ │ ├── UploadSnippet.jsx
│ │ ├── constants.jsx
│ │ ├── service.jsx
│ │ └── style.css
│ └── style
│ │ ├── Header.css
│ │ └── style.css
├── index.jsx
└── utils
│ ├── getSnapshotFromSVG.js
│ ├── index.js
│ ├── keyboard.js
│ ├── presets.js
│ └── template.js
├── static
└── share.png
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
/.codesandbox/tasks.json:
--------------------------------------------------------------------------------
1 | {
2 | // These tasks will run in order when initializing your CodeSandbox project.
3 | "setupTasks": [
4 | {
5 | "name": "Install Dependencies",
6 | "command": "pnpm install"
7 | }
8 | ],
9 |
10 | // These tasks can be run from CodeSandbox. Running one will open a log in the app.
11 | "tasks": {
12 | "build": {
13 | "name": "build",
14 | "command": "npm run build"
15 | },
16 | "dev": {
17 | "name": "dev",
18 | "command": "npm run dev",
19 | "runAtStart": true,
20 | "preview": {
21 | "port": 5173
22 | }
23 | },
24 | "format": {
25 | "name": "format",
26 | "command": "npm run format"
27 | },
28 | "start": {
29 | "name": "start",
30 | "command": "npm run start"
31 | },
32 | "lint": {
33 | "name": "lint",
34 | "command": "npm run lint"
35 | },
36 | "serve": {
37 | "name": "serve",
38 | "command": "npm run serve"
39 | },
40 | "clean": {
41 | "name": "clean",
42 | "command": "npm run clean"
43 | },
44 | "deploy": {
45 | "name": "deploy",
46 | "command": "npm run deploy"
47 | },
48 | "commit": {
49 | "name": "commit",
50 | "command": "npm run commit"
51 | }
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/.devcontainer/.devcontainer.json:
--------------------------------------------------------------------------------
1 | // For format details, see https://aka.ms/devcontainer.json. For config options, see the
2 | // README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
3 | {
4 | "name": "Node.js & TypeScript",
5 | // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
6 | "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye"
7 |
8 | // Features to add to the dev container. More info: https://containers.dev/features.
9 | // "features": {},
10 |
11 | // Use 'forwardPorts' to make a list of ports inside the container available locally.
12 | // "forwardPorts": [],
13 |
14 | // Use 'postCreateCommand' to run commands after the container is created.
15 | // "postCreateCommand": "yarn install",
16 |
17 | // Configure tool-specific properties.
18 | // "customizations": {},
19 |
20 | // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
21 | // "remoteUser": "root"
22 | }
23 |
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | "eslint:recommended",
6 | "plugin:@typescript-eslint/recommended",
7 | "plugin:react-hooks/recommended",
8 | ],
9 | ignorePatterns: ["dist", ".eslintrc.cjs"],
10 | parser: "@typescript-eslint/parser",
11 | plugins: ["react-refresh"],
12 | rules: {
13 | "react-refresh/only-export-components": [
14 | "warn",
15 | { allowConstantExport: true },
16 | ],
17 | },
18 | };
19 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | .cache
2 | package.json
3 | package-lock.json
4 | public
5 |
--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = require('@significa/prettier-config')
2 |
--------------------------------------------------------------------------------
/_third-parts/react-sketch/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Thomas Bolis
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 |
23 |
--------------------------------------------------------------------------------
/_third-parts/react-sketch/src/arrow.js:
--------------------------------------------------------------------------------
1 | /*eslint no-unused-vars: 0*/
2 |
3 | import FabricCanvasTool from './fabrictool'
4 |
5 | import { fabric } from 'fabric'
6 |
7 | class Arrow extends FabricCanvasTool {
8 | configureCanvas(props) {
9 | let canvas = this._canvas
10 | canvas.isDrawingMode = canvas.selection = false
11 | canvas.forEachObject(o => (o.selectable = o.evented = false))
12 | this._width = props.lineWidth
13 | this._color = props.lineColor
14 | }
15 |
16 | doMouseDown(o) {
17 | this.isDown = true
18 | let canvas = this._canvas
19 | var pointer = canvas.getPointer(o.e)
20 | var points = [pointer.x, pointer.y, pointer.x, pointer.y]
21 | this.line = new fabric.Line(points, {
22 | strokeWidth: this._width,
23 | fill: this._color,
24 | stroke: this._color,
25 | originX: 'center',
26 | originY: 'center',
27 | selectable: false,
28 | evented: false,
29 | })
30 |
31 | this.head = new fabric.Triangle({
32 | fill: this._color,
33 | left: pointer.x,
34 | top: pointer.y,
35 | originX: 'center',
36 | originY: 'center',
37 | height: 3 * this._width,
38 | width: 3 * this._width,
39 | selectable: false,
40 | evented: false,
41 | angle: 90,
42 | })
43 |
44 | canvas.add(this.line)
45 | canvas.add(this.head)
46 | }
47 |
48 | doMouseMove(o) {
49 | if (!this.isDown) return
50 | let canvas = this._canvas
51 | var pointer = canvas.getPointer(o.e)
52 | this.line.set({ x2: pointer.x, y2: pointer.y })
53 | this.line.setCoords()
54 |
55 | let x_delta = pointer.x - this.line.x1
56 | let y_delta = pointer.y - this.line.y1
57 |
58 | this.head.set({
59 | left: pointer.x,
60 | top: pointer.y,
61 | angle: 90 + (Math.atan2(y_delta, x_delta) * 180) / Math.PI,
62 | })
63 |
64 | canvas.renderAll()
65 | }
66 |
67 | doMouseUp(o) {
68 | this.isDown = false
69 | let canvas = this._canvas
70 |
71 | canvas.remove(this.line)
72 | canvas.remove(this.head)
73 | let arrow = new fabric.Group([this.line, this.head])
74 | canvas.add(arrow)
75 | }
76 |
77 | doMouseOut(o) {
78 | this.isDown = false
79 | }
80 | }
81 |
82 | export default Arrow
83 |
--------------------------------------------------------------------------------
/_third-parts/react-sketch/src/circle.js:
--------------------------------------------------------------------------------
1 | /*eslint no-unused-vars: 0*/
2 |
3 | import FabricCanvasTool from './fabrictool'
4 | import { linearDistance } from './utils'
5 |
6 | import { fabric } from 'fabric'
7 |
8 | class Circle extends FabricCanvasTool {
9 | configureCanvas(props) {
10 | let canvas = this._canvas
11 | canvas.isDrawingMode = canvas.selection = false
12 | canvas.forEachObject(o => (o.selectable = o.evented = false))
13 | this._width = props.lineWidth
14 | this._color = props.lineColor
15 | this._fill = props.fillColor
16 | }
17 |
18 | doMouseDown(o) {
19 | let canvas = this._canvas
20 | this.isDown = true
21 | let pointer = canvas.getPointer(o.e)
22 | ;[this.startX, this.startY] = [pointer.x, pointer.y]
23 | this.circle = new fabric.Circle({
24 | left: this.startX,
25 | top: this.startY,
26 | originX: 'left',
27 | originY: 'center',
28 | strokeWidth: this._width,
29 | stroke: this._color,
30 | fill: this._fill,
31 | selectable: false,
32 | evented: false,
33 | radius: 1,
34 | })
35 | canvas.add(this.circle)
36 | }
37 |
38 | doMouseMove(o) {
39 | if (!this.isDown) return
40 | let canvas = this._canvas
41 | let pointer = canvas.getPointer(o.e)
42 | this.circle.set({
43 | radius:
44 | linearDistance(
45 | { x: this.startX, y: this.startY },
46 | { x: pointer.x, y: pointer.y }
47 | ) / 2,
48 | angle:
49 | (Math.atan2(pointer.y - this.startY, pointer.x - this.startX) * 180) /
50 | Math.PI,
51 | })
52 | this.circle.setCoords()
53 | canvas.renderAll()
54 | }
55 |
56 | doMouseUp(o) {
57 | this.isDown = false
58 | }
59 | }
60 |
61 | export default Circle
62 |
--------------------------------------------------------------------------------
/_third-parts/react-sketch/src/fabrictool.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars: 0 */
2 |
3 | /**
4 | * "Abstract" like base class for a Canvas tool
5 | */
6 | class FabricCanvasTool {
7 | constructor(canvas) {
8 | this._canvas = canvas
9 | }
10 |
11 | configureCanvas(props) {}
12 |
13 | doMouseUp(event) {}
14 |
15 | doMouseDown(event) {}
16 |
17 | doMouseMove(event) {}
18 |
19 | doMouseOut(event) {}
20 | }
21 |
22 | export default FabricCanvasTool
23 |
--------------------------------------------------------------------------------
/_third-parts/react-sketch/src/history.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Maintains the history of an object
3 | */
4 | class History {
5 | constructor(undoLimit = 10, debug = false) {
6 | this.undoLimit = undoLimit
7 | this.undoList = []
8 | this.redoList = []
9 | this.current = null
10 | this.debug = debug
11 | }
12 |
13 | /**
14 | * Get the limit of undo/redo actions
15 | *
16 | * @returns {number|*} the undo limit, as it is configured when constructing the history instance
17 | */
18 | getUndoLimit() {
19 | return this.undoLimit
20 | }
21 |
22 | /**
23 | * Get Current state
24 | *
25 | * @returns {null|*}
26 | */
27 | getCurrent() {
28 | return this.current
29 | }
30 |
31 | /**
32 | * Keep an object to history
33 | *
34 | * This method will set the object as current value and will push the previous "current" object to the undo history
35 | *
36 | * @param obj
37 | */
38 | keep(obj) {
39 | try {
40 | this.redoList = []
41 | if (this.current) {
42 | this.undoList.push(this.current)
43 | }
44 | if (this.undoList.length > this.undoLimit) {
45 | this.undoList.shift()
46 | }
47 | this.current = obj
48 | } finally {
49 | this.print()
50 | }
51 | }
52 |
53 | /**
54 | * Undo the last object, this operation will set the current object to one step back in time
55 | *
56 | * @returns the new current value after the undo operation, else null if no undo operation was possible
57 | */
58 | undo() {
59 | try {
60 | if (this.current) {
61 | this.redoList.push(this.current)
62 | if (this.redoList.length > this.undoLimit) {
63 | this.redoList.shift()
64 | }
65 | if (this.undoList.length === 0) this.current = null
66 | }
67 | if (this.undoList.length > 0) {
68 | this.current = this.undoList.pop()
69 | return this.current
70 | }
71 | return null
72 | } finally {
73 | this.print()
74 | }
75 | }
76 |
77 | /**
78 | * Redo the last object, redo happens only if no keep operations have been performed
79 | *
80 | * @returns the new current value after the redo operation, or null if no redo operation was possible
81 | */
82 | redo() {
83 | try {
84 | if (this.redoList.length > 0) {
85 | if (this.current) this.undoList.push(this.current)
86 | this.current = this.redoList.pop()
87 | return this.current
88 | }
89 | return null
90 | } finally {
91 | this.print()
92 | }
93 | }
94 |
95 | /**
96 | * Checks whether we can perform a redo operation
97 | *
98 | * @returns {boolean}
99 | */
100 | canRedo() {
101 | return this.redoList.length > 0
102 | }
103 |
104 | /**
105 | * Checks whether we can perform an undo operation
106 | *
107 | * @returns {boolean}
108 | */
109 | canUndo() {
110 | return this.undoList.length > 0 || this.current !== null
111 | }
112 |
113 | /**
114 | * Clears the history maintained, can be undone
115 | */
116 | clear() {
117 | this.undoList = []
118 | this.redoList = []
119 | this.current = null
120 | this.print()
121 | }
122 |
123 | print() {
124 | if (this.debug) {
125 | /* eslint-disable no-console */
126 | console.log(
127 | this.undoList,
128 | ' -> ' + this.current + ' <- ',
129 | this.redoList.slice(0).reverse()
130 | )
131 | }
132 | }
133 | }
134 |
135 | export default History
136 |
--------------------------------------------------------------------------------
/_third-parts/react-sketch/src/index.js:
--------------------------------------------------------------------------------
1 | import SketchField from './SketchField'
2 | import Tools from './tools'
3 |
4 | export { SketchField }
5 | export { Tools }
6 |
7 | export default {
8 | SketchField,
9 | Tools,
10 | }
11 |
--------------------------------------------------------------------------------
/_third-parts/react-sketch/src/line.js:
--------------------------------------------------------------------------------
1 | /*eslint no-unused-vars: 0*/
2 |
3 | import FabricCanvasTool from './fabrictool'
4 |
5 | import { fabric } from 'fabric'
6 |
7 | class Line extends FabricCanvasTool {
8 | configureCanvas(props) {
9 | let canvas = this._canvas
10 | canvas.isDrawingMode = canvas.selection = false
11 | canvas.forEachObject(o => (o.selectable = o.evented = false))
12 | this._width = props.lineWidth
13 | this._color = props.lineColor
14 | }
15 |
16 | doMouseDown(o) {
17 | this.isDown = true
18 | let canvas = this._canvas
19 | var pointer = canvas.getPointer(o.e)
20 | var points = [pointer.x, pointer.y, pointer.x, pointer.y]
21 | this.line = new fabric.Line(points, {
22 | strokeWidth: this._width,
23 | fill: this._color,
24 | stroke: this._color,
25 | originX: 'center',
26 | originY: 'center',
27 | selectable: false,
28 | evented: false,
29 | })
30 | canvas.add(this.line)
31 | }
32 |
33 | doMouseMove(o) {
34 | if (!this.isDown) return
35 | let canvas = this._canvas
36 | var pointer = canvas.getPointer(o.e)
37 | this.line.set({ x2: pointer.x, y2: pointer.y })
38 | this.line.setCoords()
39 | canvas.renderAll()
40 | }
41 |
42 | doMouseUp(o) {
43 | this.isDown = false
44 | }
45 |
46 | doMouseOut(o) {
47 | this.isDown = false
48 | }
49 | }
50 |
51 | export default Line
52 |
--------------------------------------------------------------------------------
/_third-parts/react-sketch/src/pan.js:
--------------------------------------------------------------------------------
1 | /*eslint no-unused-vars: 0*/
2 |
3 | import FabricCanvasTool from './fabrictool'
4 |
5 | import { fabric } from 'fabric'
6 |
7 | class Pan extends FabricCanvasTool {
8 | configureCanvas(props) {
9 | let canvas = this._canvas
10 | canvas.isDrawingMode = canvas.selection = false
11 | canvas.forEachObject(o => (o.selectable = o.evented = false))
12 | //Change the cursor to the move grabber
13 | canvas.defaultCursor = 'move'
14 | }
15 |
16 | doMouseDown(o) {
17 | let canvas = this._canvas
18 | this.isDown = true
19 | let pointer = canvas.getPointer(o.e)
20 | this.startX = pointer.x
21 | this.startY = pointer.y
22 | }
23 |
24 | doMouseMove(o) {
25 | if (!this.isDown) return
26 | let canvas = this._canvas
27 | let pointer = canvas.getPointer(o.e)
28 |
29 | canvas.relativePan({
30 | x: pointer.x - this.startX,
31 | y: pointer.y - this.startY,
32 | })
33 | canvas.renderAll()
34 | }
35 |
36 | doMouseUp(o) {
37 | this.isDown = false
38 | }
39 | }
40 |
41 | export default Pan
42 |
--------------------------------------------------------------------------------
/_third-parts/react-sketch/src/pencil.js:
--------------------------------------------------------------------------------
1 | import FabricCanvasTool from './fabrictool'
2 |
3 | class Pencil extends FabricCanvasTool {
4 | configureCanvas(props) {
5 | this._canvas.isDrawingMode = true
6 | this._canvas.freeDrawingBrush.width = props.lineWidth
7 | this._canvas.freeDrawingBrush.color = props.lineColor
8 | }
9 | }
10 |
11 | export default Pencil
12 |
--------------------------------------------------------------------------------
/_third-parts/react-sketch/src/rectangle.js:
--------------------------------------------------------------------------------
1 | /*eslint no-unused-vars: 0*/
2 |
3 | import FabricCanvasTool from './fabrictool'
4 |
5 | import { fabric } from 'fabric'
6 |
7 | class Rectangle extends FabricCanvasTool {
8 | configureCanvas(props) {
9 | let canvas = this._canvas
10 | canvas.isDrawingMode = canvas.selection = false
11 | canvas.forEachObject(o => (o.selectable = o.evented = false))
12 | this._width = props.lineWidth
13 | this._color = props.lineColor
14 | this._fill = props.fillColor
15 | }
16 |
17 | doMouseDown(o) {
18 | let canvas = this._canvas
19 | this.isDown = true
20 | let pointer = canvas.getPointer(o.e)
21 | this.startX = pointer.x
22 | this.startY = pointer.y
23 | this.rect = new fabric.Rect({
24 | left: this.startX,
25 | top: this.startY,
26 | originX: 'left',
27 | originY: 'top',
28 | width: pointer.x - this.startX,
29 | height: pointer.y - this.startY,
30 | stroke: this._color,
31 | strokeWidth: this._width,
32 | fill: this._fill,
33 | //fill: 'rgba(255,0,0,0.5)',
34 | transparentCorners: false,
35 | selectable: false,
36 | evented: false,
37 | angle: 0,
38 | })
39 | canvas.add(this.rect)
40 | }
41 |
42 | doMouseMove(o) {
43 | if (!this.isDown) return
44 | let canvas = this._canvas
45 | let pointer = canvas.getPointer(o.e)
46 | if (this.startX > pointer.x) {
47 | this.rect.set({ left: Math.abs(pointer.x) })
48 | }
49 | if (this.startY > pointer.y) {
50 | this.rect.set({ top: Math.abs(pointer.y) })
51 | }
52 | this.rect.set({ width: Math.abs(this.startX - pointer.x) })
53 | this.rect.set({ height: Math.abs(this.startY - pointer.y) })
54 | this.rect.setCoords()
55 | canvas.renderAll()
56 | }
57 |
58 | doMouseUp(o) {
59 | this.isDown = false
60 | }
61 | }
62 |
63 | export default Rectangle
64 |
--------------------------------------------------------------------------------
/_third-parts/react-sketch/src/select.js:
--------------------------------------------------------------------------------
1 | /*eslint no-unused-vars: 0*/
2 |
3 | import FabricCanvasTool from './fabrictool'
4 |
5 | class Select extends FabricCanvasTool {
6 | configureCanvas(props) {
7 | let canvas = this._canvas
8 | canvas.isDrawingMode = false
9 | canvas.selection = true
10 | canvas.forEachObject(o => {
11 | o.selectable = o.evented = true
12 | })
13 | }
14 | }
15 |
16 | export default Select
17 |
--------------------------------------------------------------------------------
/_third-parts/react-sketch/src/tools.js:
--------------------------------------------------------------------------------
1 | export default {
2 | Circle: 'circle',
3 | Line: 'line',
4 | Arrow: 'arrow',
5 | Pencil: 'pencil',
6 | Rectangle: 'rectangle',
7 | Select: 'select',
8 | Pan: 'pan',
9 | }
10 |
--------------------------------------------------------------------------------
/_third-parts/react-sketch/src/utils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Determine the mouse position
3 | *
4 | * @param event the canvas event
5 | * @returns *[] tuple of position x,y
6 | * @private
7 | */
8 | export const pointerPosition = event => {
9 | event = event || window.event
10 | var target = event.target || event.srcElement,
11 | style = target.currentStyle || window.getComputedStyle(target, null),
12 | borderLeftWidth = parseInt(style['borderLeftWidth'], 10),
13 | borderTopWidth = parseInt(style['borderTopWidth'], 10),
14 | rect = target.getBoundingClientRect(),
15 | _x = event.clientX - borderLeftWidth - rect.left,
16 | _y = event.clientY - borderTopWidth - rect.top,
17 | _touchX = event.changedTouches
18 | ? event.changedTouches[0].clientX - borderLeftWidth - rect.left
19 | : null,
20 | _touchY = event.changedTouches
21 | ? event.changedTouches[0].clientY - borderTopWidth - rect.top
22 | : null
23 | return [_x || _touchX, _y || _touchY]
24 | }
25 |
26 | /**
27 | * Calculate the distance of two x,y points
28 | *
29 | * @param point1 an object with x,y attributes representing the start point
30 | * @param point2 an object with x,y attributes representing the end point
31 | *
32 | * @returns {number}
33 | */
34 | export const linearDistance = (point1, point2) => {
35 | let xs = point2.x - point1.x
36 | let ys = point2.y - point1.y
37 | return Math.sqrt(xs * xs + ys * ys)
38 | }
39 |
40 | /**
41 | * Return a random uuid of the form xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
42 | * @returns {string}
43 | */
44 | export const uuid4 = () => {
45 | let uuid = '',
46 | ii
47 | for (ii = 0; ii < 32; ii += 1) {
48 | switch (ii) {
49 | case 8:
50 | case 20:
51 | uuid += '-'
52 | uuid += ((Math.random() * 16) | 0).toString(16)
53 | break
54 | case 12:
55 | uuid += '-'
56 | uuid += '4'
57 | break
58 | case 16:
59 | uuid += '-'
60 | uuid += ((Math.random() * 4) | 8).toString(16)
61 | break
62 | default:
63 | uuid += ((Math.random() * 16) | 0).toString(16)
64 | }
65 | }
66 | return uuid
67 | }
68 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | React Skeleton - Create Content Loader
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "create-content-loader",
3 | "homepage": "https://danilowoz.github.io/create-content-loader",
4 | "version": "0.1.0",
5 | "scripts": {
6 | "dev": "vite",
7 | "build": "tsc && vite build",
8 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
9 | "preview": "vite preview",
10 | "format": "prettier --write \"**/*.{js,jsx,json,md}\""
11 | },
12 | "dependencies": {
13 | "@significa/eslint-config": "0.0.15",
14 | "@significa/prettier-config": "0.0.15",
15 | "classnames": "^2.2.6",
16 | "clipboard": "^2.0.4",
17 | "fabric": "^3.6.3",
18 | "jsdom": "^16.2.1",
19 | "react-click-outside": "3.0.1",
20 | "react-content-loader": "7.0.0",
21 | "react-error-overlay": "^6.0.6",
22 | "react-ga": "^2.7.0",
23 | "react-helmet": "^5.2.1",
24 | "react-live": "^2.2.2",
25 | "react-sketch": "^0.5.1",
26 | "react-syntax-highlighter": "^12.2.1",
27 | "throttle-debounce": "^2.2.1",
28 | "react": "^16.13.0",
29 | "react-dom": "^16.13.0"
30 | },
31 | "devDependencies": {
32 | "prettier": "^1.19.1",
33 | "@types/react": "^18.2.51",
34 | "@types/react-dom": "^18.2.17",
35 | "@typescript-eslint/eslint-plugin": "^6.20.0",
36 | "@typescript-eslint/parser": "^6.20.0",
37 | "@vitejs/plugin-react": "^4.2.1",
38 | "eslint": "^8.55.0",
39 | "eslint-plugin-react-hooks": "^4.6.0",
40 | "eslint-plugin-react-refresh": "^0.4.5",
41 | "typescript": "^5.2.2",
42 | "vite": "^5.0.12"
43 | },
44 | "browserslist": [
45 | ">0.2%",
46 | "not dead",
47 | "not ie <= 11",
48 | "not op_mini all"
49 | ]
50 | }
51 |
--------------------------------------------------------------------------------
/src/Gallery/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 | import ReactGA from 'react-ga'
4 |
5 | import './style.css'
6 | import * as data from './insertYourLoaderHere'
7 |
8 | const renderItem = (item, index) => {
9 | const Component = data[item]
10 | const { name, github, description, filename } = Component.metadata
11 |
12 | if (!name || !github || !description || !filename) return null
13 |
14 | return (
15 |
16 |
17 |
18 |
19 |
20 |
55 |
56 | )
57 | }
58 |
59 | const NewItem = () => (
60 |
87 | )
88 |
89 | const Gallery = () => {
90 | const [searchQuery, setSearchQuery] = React.useState('')
91 | const arrData = Object.keys(data)
92 |
93 | const filteredData = arrData.filter(item => {
94 | const Component = data[item]
95 | const { name, github, description } = Component.metadata
96 |
97 | return (
98 | name.toLowerCase().indexOf(searchQuery) !== -1 ||
99 | github.toLowerCase().indexOf(searchQuery) !== -1 ||
100 | description.toLowerCase().indexOf(searchQuery) !== -1
101 | )
102 | })
103 |
104 | return (
105 |
106 |
117 |
118 |
119 | {filteredData.map(renderItem)}
120 |
121 |
122 | )
123 | }
124 |
125 | export default Gallery
126 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/AmazonLoader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const AmazonLoader = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | )
36 | }
37 |
38 | AmazonLoader.metadata = {
39 | name: 'Sarah Ann Garcia',
40 | github: 'sgarcia30',
41 | description: 'This is an Amazon sample product.', // Little tagline
42 | filename: 'AmazonLoader',
43 | }
44 |
45 | export default AmazonLoader
46 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Article.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const Article = props => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | Article.metadata = {
16 | name: 'RoyalBhati',
17 | github: 'royalbhati',
18 | description: 'Simple Article',
19 | filename: 'Article',
20 | }
21 |
22 | export default Article
23 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/ArticleLoader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const ArticleLoader = props => (
5 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | )
45 |
46 | ArticleLoader.metadata = {
47 | name: 'Sridhar Easwaran',
48 | github: 'sridhareaswaran',
49 | description: 'Article or News',
50 | filename: 'ArticleLoader',
51 | }
52 |
53 | export default ArticleLoader
54 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/AuthorsList.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const AuthorsList = props => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | )
25 |
26 | AuthorsList.metadata = {
27 | name: 'BYIRINGIRO Emmanuel', // My name
28 | github: 'emmbyiringiro', // Github username
29 | description: ' Authors/posts list style ', // Loader description
30 | filename: 'AuthorsList', // filename of your loader
31 | }
32 |
33 | export default AuthorsList
34 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/AvatarWithText.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const AvatarWithText = props => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | AvatarWithText.metadata = {
16 | name: 'Akash Bambhaniya',
17 | github: 'Akashnb', // Github username
18 | description: 'Avatar With Text (circle)',
19 | filename: 'AvatarWithText', // filename of your loader
20 | }
21 |
22 | export default AvatarWithText
23 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/BarChart.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const BarChart = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | )
14 | }
15 |
16 | BarChart.metadata = {
17 | name: 'Phuong Dao',
18 | github: 'dao-phuong',
19 | description: 'Bar Chart',
20 | filename: 'BarChart',
21 | }
22 |
23 | export default BarChart
24 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/BlogItem.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const BlogItem = props => (
5 |
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
13 | BlogItem.metadata = {
14 | name: 'RJavlonbek',
15 | github: 'RJavlonbek',
16 | description: 'Blog item',
17 | filename: 'BlogItem',
18 | }
19 |
20 | export default BlogItem
21 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/BootstrapCardDataTable.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const BootstrapCardDataTable = props => {
5 | return (
6 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 | )
65 | }
66 |
67 | BootstrapCardDataTable.metadata = {
68 | name: 'Shaheer Ali',
69 | github: 'itsmeshaheerali',
70 | description:
71 | 'This loader exactly fit inside your bootrstrap card component no override happens like existing DataTable Loader',
72 | filename: 'BootstrapCardDataTable',
73 | }
74 |
75 | export default BootstrapCardDataTable
76 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/BulletList.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const BulletList = props => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | )
16 |
17 | BulletList.metadata = {
18 | name: 'DaniloWoz',
19 | github: 'danilowoz',
20 | description: 'Bullet list',
21 | filename: 'BulletList',
22 | }
23 |
24 | export default BulletList
25 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/CalendarEventLoader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const CalendarEventLoader = props => {
5 | return (
6 |
13 | {/* Date */}
14 | {/* Event name */}
15 | {/* Event details */}
16 |
17 | )
18 | }
19 |
20 | CalendarEventLoader.metadata = {
21 | name: 'Erika',
22 | github: 'elixirika',
23 | description: 'Loader for calendar events',
24 | filename: 'CalendarEventLoader',
25 | }
26 |
27 | export default CalendarEventLoader
28 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/CalloutStripLoader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const CalloutStripLoader = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 | )
13 | }
14 |
15 | CalloutStripLoader.metadata = {
16 | name: 'Deepak Kumar Vellingiri', // My name
17 | github: 'dkvellin', // Github username
18 | description: 'Callout strip', // Little tagline
19 | filename: 'CalloutStripLoader', // filename of your loader
20 | }
21 |
22 | export default CalloutStripLoader
23 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Card.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const Card = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | )
17 | }
18 |
19 | Card.metadata = {
20 | name: 'PhátMai', // My name
21 | github: 'lPaths', // Github username
22 | description: 'Card', // Little tagline
23 | filename: 'Card', // filename of your loader
24 | }
25 |
26 | export default Card
27 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/CardList.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const CardList = props => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | )
16 |
17 | export default CardList
18 |
19 | CardList.metadata = {
20 | name: 'Rivky Bleier',
21 | github: 'RivkyB',
22 | description: 'Simple Card List',
23 | filename: 'CardList',
24 | }
25 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Catalog.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const Catalog = props => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | )
44 |
45 | Catalog.metadata = {
46 | name: 'Afrizal Fikri',
47 | github: 'koneko096', // Github username
48 | description: 'Catalog',
49 | filename: 'Catalog', // filename of your loader
50 | }
51 |
52 | export default Catalog
53 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/CatalogMagic.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const CatalogMagic = ({
5 | width = 1366,
6 | heading = { width: 140, height: 24 },
7 | row = 2,
8 | column = 5,
9 | padding = 12,
10 | borderRadius = 4,
11 | ...props
12 | }) => {
13 | const list = []
14 |
15 | let height
16 |
17 | for (let i = 1; i <= row; i++) {
18 | for (let j = 0; j < column; j++) {
19 | const itemWidth = (width - padding * (column + 1)) / column
20 |
21 | const x = padding + j * (itemWidth + padding)
22 |
23 | const height1 = itemWidth
24 |
25 | const height2 = 20
26 |
27 | const height3 = 20
28 |
29 | const space =
30 | padding + height1 + (padding / 2 + height2) + height3 + padding * 4
31 |
32 | const y1 = padding + heading.height + padding * 2 + space * (i - 1)
33 |
34 | const y2 = y1 + padding + height1
35 |
36 | const y3 = y2 + padding / 2 + height2
37 |
38 | list.push(
39 | <>
40 |
48 |
49 |
57 | >
58 | )
59 |
60 | if (i === row) {
61 | height = y3 + height3
62 | }
63 | }
64 | }
65 |
66 | return (
67 |
73 | {heading && (
74 |
82 | )}
83 | {list}
84 |
85 | )
86 | }
87 |
88 | CatalogMagic.metadata = {
89 | name: 'I am Doong - I come from Việt Nam',
90 | github: 'toiladoong',
91 | description: 'CatalogMagic',
92 | filename: 'CatalogMagic',
93 | }
94 |
95 | export default CatalogMagic
96 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/CategoryLoader.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import ContentLoader from "react-content-loader"
3 |
4 | const CategoryLoader = (props) => (
5 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | )
25 |
26 | CategoryLoader.metadata = {
27 | name: "Nitish Sharma",
28 | github: "Nitz2611",
29 | description: "Category with image and description",
30 | filename: "CategoryLoader"
31 | }
32 |
33 | export default CategoryLoader
34 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Chat.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const Chat = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | )
18 | }
19 |
20 | Chat.metadata = {
21 | name: 'Daniel Eslava', // My name
22 | github: 'Eslavadev', // Github username
23 | description: 'Generic Chat', // Little tagline
24 | filename: 'Chat', // filename of your loader
25 | }
26 |
27 | export default Chat
28 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/ChatGPT.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import ContentLoader from "react-content-loader";
3 |
4 | const ChatGPT = (props) => {
5 | const [theme, setTheme] = useState('light');
6 |
7 | useEffect(() => {
8 | const storedTheme = localStorage.getItem('preferredDarkMode') === 'true' ? 'dark' : 'light';
9 | setTheme(storedTheme);
10 | }, []);
11 |
12 | const backgroundColor = theme === 'dark' ? '#1e293b ' : '#CCFAF9';
13 | const foregroundColor = theme === 'dark' ? '#155e75 ' : '#2C3E50';
14 | return (
15 |
21 |
22 |
23 |
24 |
25 |
26 | );
27 | };
28 |
29 | ChatGPT.metadata = {
30 | name: "HAIDER Ali", // My name
31 | github: "https://github.com/HaiderAli170", // Github username
32 | description: "Chat GPT", // Little tagline
33 | filename: "ChatGPT", // filename of your loader
34 | };
35 |
36 | export default ChatGPT;
37 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/CheckboxList.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const CheckboxList = props => (
5 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | )
24 |
25 | CheckboxList.metadata = {
26 | name: 'Manuela Garcia',
27 | github: 'ManuelaGar',
28 | description: 'This is a checkbox list loader.',
29 | filename: 'CheckboxList',
30 | }
31 |
32 | export default CheckboxList
33 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/ClassicPostLoader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const ClassicPostLoader = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | )
19 | }
20 |
21 | ClassicPostLoader.metadata = {
22 | name: 'Emrah Akcelik',
23 | github: 'emrakc',
24 | description: 'Classic Post Loader',
25 | filename: 'ClassicPostLoader',
26 | }
27 |
28 | export default ClassicPostLoader
29 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/CleanChat.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const CleanChat = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | )
15 | }
16 |
17 | CleanChat.metadata = {
18 | name: 'Pablo Maribondo',
19 | github: 'pablomaribondo',
20 | description: 'Clean Chat',
21 | filename: 'CleanChat',
22 | }
23 |
24 | export default CleanChat
25 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/CleoOne.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const CleoOne = ({ ...rest }) => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | )
18 |
19 | CleoOne.metadata = {
20 | name: 'Yusuf Özlü',
21 | github: 'ozluy',
22 | description: 'Dashboard strategy item on CLEO.one(https://cleo.one).',
23 | filename: 'CleoOne',
24 | }
25 |
26 | export default CleoOne
27 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Code.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const Code = props => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | )
16 |
17 | Code.metadata = {
18 | name: 'DaniloWoz',
19 | github: 'danilowoz',
20 | description: 'Code style',
21 | filename: 'Code',
22 | }
23 |
24 | export default Code
25 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/CustomerTestimonial.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const CustomerTestimonial = props => {
5 | return (
6 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | )
31 | }
32 |
33 | CustomerTestimonial.metadata = {
34 | name: 'Pranay Binju',
35 | github: 'pranaybinju',
36 | description: 'Customer Testimonial Skeleton',
37 | filename: 'CustomerTestimonial',
38 | }
39 |
40 | export default CustomerTestimonial
41 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/DashboardLoader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const DashboardLoader = props => (
5 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 | )
76 |
77 | DashboardLoader.metadata = {
78 | name: 'Sridhar Easwaran',
79 | github: 'sridhareaswaran',
80 | description: 'Dashboard pages',
81 | filename: 'DashboardLoader',
82 | }
83 |
84 | export default DashboardLoader
85 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/DataList.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const DataList = props => {
5 | return (
6 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | )
29 | }
30 |
31 | DataList.metadata = {
32 | name: 'Bilal Ahmed',
33 | github: 'bilal-ahmed-dev',
34 | description: 'Simple CRUD Data in Table format',
35 | filename: 'DataList',
36 | }
37 |
38 | export default DataList
39 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/DataTable.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const DataTable = props => (
5 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 | )
75 |
76 | DataTable.metadata = {
77 | name: 'Mohd Arif Un',
78 | github: 'arif-un',
79 | description: 'Data Table skeleton',
80 | filename: 'DataTable',
81 | }
82 |
83 | export default DataTable
84 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/DevtoCard.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const DevtoCard = props => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | )
13 |
14 | DevtoCard.metadata = {
15 | name: 'RoyalBhati',
16 | github: 'royalbhati',
17 | description: 'Dev.to card',
18 | filename: 'DevtoCard',
19 | }
20 |
21 | export default DevtoCard
22 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/DoorDashFavorite.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const DoorDashFavorite = props => (
5 |
13 |
14 |
15 |
16 |
17 | )
18 |
19 | DoorDashFavorite.metadata = {
20 | name: 'Nic Bovee', // My name
21 | github: 'ghettifish', // Github username
22 | description: 'A simple favorite from the DoorDash local favorites.', // Little tagline
23 | filename: 'DoorDashFavorite', // filename of your loader
24 | }
25 |
26 | export default DoorDashFavorite
27 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/EcommerceProduct.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const EcommerceProduct = props => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | )
20 |
21 | EcommerceProduct.metadata = {
22 | name: 'Muhammd Bilal',
23 | github: 'bilalbutt044',
24 | description: 'Ecommerce products and category',
25 | filename: 'EcommerceProduct',
26 | }
27 |
28 | export default EcommerceProduct
29 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/EventsLoader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const EventsLoader = props => (
5 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | )
28 |
29 | EventsLoader.metadata = {
30 | name: 'Sridhar Easwaran',
31 | github: 'sridhareaswaran',
32 | description: 'Events',
33 | filename: 'EventsLoader',
34 | }
35 |
36 | export default EventsLoader
37 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Facebook.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const FacebookStyle = props => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | FacebookStyle.metadata = {
16 | name: 'DaniloWoz',
17 | github: 'danilowoz',
18 | description: 'Facebook style',
19 | filename: 'Facebook',
20 | }
21 |
22 | export default FacebookStyle
23 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/FadingLoader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const FadingLoader = () => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | )
14 | }
15 |
16 | const FadingLoaderCard1 = () => {
17 | return (
18 |
24 |
25 |
26 |
27 |
28 | )
29 | }
30 |
31 | const FadingLoaderCard2 = () => {
32 | return (
33 |
39 |
40 |
41 |
42 |
43 | )
44 | }
45 |
46 | const FadingLoaderCard3 = () => {
47 | return (
48 |
54 |
55 |
56 |
57 |
58 | )
59 | }
60 |
61 | const FadingLoaderCard4 = () => {
62 | return (
63 |
69 |
70 |
71 |
72 |
73 | )
74 | }
75 |
76 | const FadingLoaderCard5 = () => {
77 | return (
78 |
84 |
85 |
86 |
87 |
88 | )
89 | }
90 |
91 | FadingLoader.metadata = {
92 | name: 'Nikhil Anand', // My name
93 | github: 'anandnkhl', // Github username
94 | description: 'Loader that fades downwards', // Little tagline
95 | filename: 'FadingLoader', // filename of your loader
96 | }
97 |
98 | export default FadingLoader
99 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Form.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const Form = props => {
5 | return (
6 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | )
27 | }
28 |
29 | Form.metadata = {
30 | name: 'Chris Fulgencio', // Contributer
31 | github: 'fulgencc', // Github username
32 | description: 'Small form', // Little tagline
33 | filename: 'Form', // filename
34 | }
35 |
36 | export default Form
37 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/ForumPost.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const ForumPost = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | )
14 | }
15 |
16 | ForumPost.metadata = {
17 | name: 'Aditi Tipnis', // My name
18 | github: 'adititipnis', // Github username
19 | description: 'Forum Post', // Little tagline
20 | filename: 'ForumPost', // filename of your loader
21 | }
22 |
23 | export default ForumPost
24 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/GithubProfile.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const GithubProfile = props => {
5 | return (
6 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 | )
40 | }
41 |
42 | GithubProfile.metadata = {
43 | name: 'Nikhil Anand', // My name
44 | github: 'anandnkhl', // Github username
45 | description: 'Latest Github Profile', // Little tagline
46 | filename: 'GithubProfile', // filename of your loaderr
47 | }
48 |
49 | export default GithubProfile
50 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/GlobalSidebar.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const GlobalSidebar = props => {
5 | return (
6 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | )
41 | }
42 |
43 | GlobalSidebar.metadata = {
44 | name: 'Arfath Tade', // My name
45 | github: 'arfath77', // Github username
46 | description:
47 | 'Global sidebar with tabs containig search bar and list of options', // Little tagline
48 | filename: 'GlobalSidebar', // filename of your loader
49 | }
50 |
51 | export default GlobalSidebar
52 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Gmail.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const GmailLoader = props => {
5 | return (
6 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | )
29 | }
30 |
31 | GmailLoader.metadata = {
32 | name: 'Caio Davi',
33 | github: 'caio-davi',
34 | description: 'Gmail Style',
35 | filename: 'Gmail',
36 | }
37 |
38 | export default GmailLoader
39 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/GoogleMap.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const GoogleMap = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | )
15 | }
16 |
17 | GoogleMap.metadata = {
18 | name: 'Ali Daghighi', // My name
19 | github: 'alidaghighi', // Github username
20 | description: 'Google Map share location with contact', // Little tagline
21 | filename: 'GoogleMap', // filename of your loader
22 | }
23 |
24 | export default GoogleMap
25 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Grid.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const Grid = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | )
15 | }
16 |
17 | Grid.metadata = {
18 | name: 'baptiste fkt',
19 | github: 'baptistefkt',
20 | description: 'Three column grid layout',
21 | filename: 'Grid',
22 | }
23 |
24 | export default Grid
25 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/HackerNewsLoader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const HackerNewsLoader = props => (
5 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | )
21 |
22 | HackerNewsLoader.metadata = {
23 | name: 'Justin Irabor',
24 | github: 'vunderkind',
25 | description: 'A loading skeleton for your HackerNews clone.',
26 | filename: 'HackerNewsLoader',
27 | }
28 |
29 | export default HackerNewsLoader
30 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/HeadBodyGrid.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const HeadBodyGrid = ({ ...rest }) => (
5 |
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
13 | HeadBodyGrid.metadata = {
14 | name: 'Didier Munezero',
15 | github: 'didiermunezero',
16 | description: 'Grid for content of head and body',
17 | filename: 'HeadBodyGrid',
18 | }
19 |
20 | export default HeadBodyGrid
21 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/HeaderLoader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const HeaderLoader = props => {
5 | return (
6 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | )
20 | }
21 |
22 | HeaderLoader.metadata = {
23 | name: 'Jose Romero', // My name
24 | github: 'JosenRomero', // Github username
25 | description: 'Simple Header', // Little tagline
26 | filename: 'HeaderLoader', // filename of your loader
27 | }
28 |
29 | export default HeaderLoader
30 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/HelpLinksLoader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const HelpLinksLoader = props => (
5 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | )
29 |
30 | HelpLinksLoader.metadata = {
31 | name: 'Sridhar Easwaran',
32 | github: 'sridhareaswaran',
33 | description: 'HelpLinks',
34 | filename: 'HelpLinksLoader',
35 | }
36 |
37 | export default HelpLinksLoader
38 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/HistoriesLoader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const HistoriesLoader = props => (
5 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | )
27 |
28 | HistoriesLoader.metadata = {
29 | name: 'Alan Hurtarte', // My name
30 | github: 'kenny08gt', // Github username
31 | description: 'Instagram histories. Picture + username', // Little tagline
32 | filename: 'HistoriesLoader', // filename of your loader
33 | }
34 |
35 | export default HistoriesLoader
36 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/HomePage.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const HomePage = props => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | )
30 |
31 | HomePage.metadata = {
32 | name: 'JAvlonbek Rakhimberdiev', // My name
33 | github: 'RJavlonbek', // Github username
34 | description: 'This is a placeholder for the home page of my Fintech project', // Little tagline
35 | filename: 'HomePage', // filename of your loader
36 | }
37 |
38 | export default HomePage
39 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/ImageGrid.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const ImageGrid = props => (
5 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | )
30 |
31 | ImageGrid.metadata = {
32 | name: 'Hassan Tijani.A',
33 | github: 'surepeps',
34 | description: 'Image Grid with Pagination',
35 | filename: 'ImageGrid',
36 | }
37 |
38 | export default ImageGrid
39 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/ImageList.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const Loader = props => {
5 | let height, width
6 | switch (props.screen) {
7 | case 'mobile': {
8 | height = '100'
9 | width = '400'
10 | break
11 | }
12 | case 'desktop': {
13 | height = '100'
14 | width = '1060'
15 | break
16 | }
17 | case 'large-screen': {
18 | height = '150'
19 | width = '1920'
20 | break
21 | }
22 | default: {
23 | height = '100'
24 | width = '1060'
25 | break
26 | }
27 | }
28 | return (
29 |
35 | {props.imageType === 'circle' ? (
36 |
37 | ) : (
38 |
39 | )}
40 |
41 |
42 |
43 |
44 | )
45 | }
46 |
47 | const ImageList = props => (
48 |
49 | {Array(5)
50 | .fill('')
51 | .map((e, i) => (
52 |
58 | ))}
59 |
60 | )
61 |
62 | ImageList.metadata = {
63 | name: 'Gaurav Agarwal',
64 | github: 'gauravagarwal2704',
65 | description: 'List with image (rectangle/circle)',
66 | filename: 'ImageList',
67 | }
68 |
69 | export default ImageList
70 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/ImageUpload.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const ImageLoader = props => {
5 | return (
6 |
14 |
15 |
16 |
17 | )
18 | }
19 |
20 | ImageLoader.metadata = {
21 | name: 'Agustin Ramos Peruzzo',
22 | github: 'agustinramos',
23 | description: 'Loader used in upload image process',
24 | filename: 'ImageUpload',
25 | }
26 |
27 | export default ImageLoader
28 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/InstaChatlist.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const InstaChatlist = props => {
5 | return (
6 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | )
25 | }
26 |
27 | InstaChatlist.metadata = {
28 | name: 'Ritik Dixit',
29 | github: 'ritikdixit1',
30 | description: 'Instagram chat list',
31 | filename: 'InstaChatlist',
32 | }
33 |
34 | export default InstaChatlist
35 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/InstaStories.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const InstaStories = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 | )
13 | }
14 |
15 | InstaStories.metadata = {
16 | name: 'LuisaBFS',
17 | github: 'luisabfs',
18 | description: 'Insta Stories',
19 | filename: 'InstaStories',
20 | }
21 |
22 | export default InstaStories
23 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Instagram.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const InstagramStyle = props => (
5 |
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
13 | InstagramStyle.metadata = {
14 | name: 'DaniloWoz',
15 | github: 'danilowoz',
16 | description: 'Instagram style',
17 | filename: 'Instagram',
18 | }
19 |
20 | export default InstagramStyle
21 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Invoice.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const Invoice = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | )
33 | }
34 |
35 | Invoice.metadata = {
36 | name: 'danielerota',
37 | github: 'danielerota',
38 | description: 'Invoice',
39 | filename: 'Invoice',
40 | }
41 |
42 | export default Invoice
43 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/LinkedIn.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const LinkedInStyle = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | )
16 | }
17 |
18 | LinkedInStyle.metadata = {
19 | name: 'Victoria Mei',
20 | github: 'vm930',
21 | description: 'LinkedIn Style',
22 | filename: 'LinkedIn',
23 | }
24 |
25 | export default LinkedInStyle
26 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/LinkedinFeed.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const LinkedinFeed = props => {
5 | return (
6 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | )
23 | }
24 |
25 | LinkedinFeed.metadata = {
26 | name: 'Ritik Dixit',
27 | github: 'ritikdixit1',
28 | description: 'LinkedIn Feed',
29 | filename: 'LinkedinFeed',
30 | }
31 |
32 | export default LinkedinFeed
33 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/ListingWithThumbnail.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const ListingWithThumbnail = props => {
5 | return (
6 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | )
24 | }
25 |
26 | ListingWithThumbnail.metadata = {
27 | name: 'Rituraj ratan',
28 | github: 'riturajratan',
29 | description: 'Listing with thumbnail',
30 | filename: 'ListingWithThumbnail',
31 | }
32 |
33 | export default ListingWithThumbnail
34 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Medium.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const Medium = props => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | )
15 |
16 | Medium.metadata = {
17 | name: 'DaniloWoz',
18 | github: 'danilowoz',
19 | description: 'Medium',
20 | filename: 'Medium',
21 | }
22 |
23 | export default Medium
24 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/NestedList.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const NestedList = props => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | )
14 |
15 | NestedList.metadata = {
16 | name: 'DaniloWoz',
17 | github: 'danilowoz',
18 | description: 'Nested list',
19 | filename: 'NestedList',
20 | }
21 |
22 | export default NestedList
23 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Netflix.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const NetflixLoader = props => {
5 | // Get values from props
6 | // const { rows, columns, coverHeight, coverWidth, padding, speed } = props;
7 |
8 | // Hardcoded values
9 | const rows = 2
10 | const columns = 5
11 | const coverHeight = 85
12 | const coverWidth = 65
13 | const padding = 5
14 | const speed = 1
15 |
16 | const coverHeightWithPadding = coverHeight + padding
17 | const coverWidthWithPadding = coverWidth + padding
18 | const initial = 35
19 | const covers = Array(columns * rows).fill(1)
20 |
21 | return (
22 |
30 |
38 |
39 | {covers.map((g, i) => {
40 | let vy = Math.floor(i / columns) * coverHeightWithPadding + initial
41 | let vx = (i * coverWidthWithPadding) % (columns * coverWidthWithPadding)
42 | return (
43 |
52 | )
53 | })}
54 |
55 | )
56 | }
57 |
58 | NetflixLoader.metadata = {
59 | name: 'Pratik Pathak',
60 | github: 'PathakPratik',
61 | description: 'Netflix Style Dynamic',
62 | filename: 'Netflix',
63 | }
64 |
65 | export default NetflixLoader
66 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/NewFacebook.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const NewFacebookLoader = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | )
15 | }
16 |
17 | NewFacebookLoader.metadata = {
18 | name: 'Ines Guerrero Sirker',
19 | github: 'inesgs12',
20 | description: 'Edited Facebook',
21 | filename: 'NewFacebook',
22 | }
23 |
24 | export default NewFacebookLoader
25 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/News.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const News = props => (
5 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | )
21 |
22 | News.metadata = {
23 | name: 'Arthur Falcão',
24 | github: 'arthurfalcao',
25 | description: 'News List',
26 | filename: 'News',
27 | }
28 |
29 | export default News
30 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/NotificationLoader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const NotificationLoader = props => {
5 | return (
6 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | )
42 | }
43 |
44 | NotificationLoader.metadata = {
45 | name: 'Sridhar Easwaran',
46 | github: 'sridhareaswaran',
47 | description: 'Notification section',
48 | filename: 'NotificationLoader',
49 | }
50 |
51 | export default NotificationLoader
52 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/PieChart.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const PieChart = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | )
19 | }
20 |
21 | PieChart.metadata = {
22 | name: 'Sarah Watanabe', //Names
23 | github: 'swatana3', //github username
24 | description: 'Pie chart.', // Little tagline
25 | filename: 'PieChart', //filename
26 | }
27 |
28 | export default PieChart
29 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/ProductDetails.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const ProductDetails = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | )
20 | }
21 |
22 | ProductDetails.metadata = {
23 | name: 'Mohd Arif Uddin', // My name
24 | github: 'Arif-un', // Github username
25 | description: 'E-Commerce / Online Shop Product Details page', // Little tagline
26 | filename: 'ProductDetails', // filename of your loader
27 | }
28 |
29 | export default ProductDetails
30 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/ProfileCard.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const ProfileCard = props => {
5 | return (
6 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | )
26 | }
27 |
28 | ProfileCard.metadata = {
29 | name: 'René Hinojosa',
30 | github: 'rene-ph',
31 | description: 'Profile Card',
32 | filename: 'ProfileCard',
33 | }
34 |
35 | export default ProfileCard
36 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/ProfileShow.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const ProfileShow = props => (
5 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | )
23 |
24 | ProfileShow.metadata = {
25 | name: 'Dhruvit Galoriya', // My name
26 | github: 'dhruvgaloriya', // Github username
27 | description: 'Show Profile Page', // Little tagline
28 | filename: 'ProfileShow', // filename of your loader
29 | }
30 |
31 | export default ProfileShow
32 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/ReactTable.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const ReactTable = () => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | )
26 | }
27 |
28 | ReactTable.metadata = {
29 | name: 'Fouad Khatib', // My name
30 | github: 'fouadkb', // Github username
31 | description: 'React-table with Pagination and search', // Little tagline
32 | filename: 'ReactTable', // filename of your loader
33 | }
34 |
35 | export default ReactTable
36 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Reddit.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const Reddit = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | )
14 | }
15 |
16 | Reddit.metadata = {
17 | name: 'Sammy Baraka', // My name
18 | github: 'sbaraka', // Github username
19 | description: 'Reddit post', // Little tagline
20 | filename: 'Reddit', // filename of your loader
21 | }
22 |
23 | export default Reddit
24 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/RepeatableTableRows.jsx:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const RepeatableTableRows = props => {
5 | const { rows = 5 } = props
6 | const rowHeight = 60
7 |
8 | return (
9 |
10 | {new Array(rows).fill(' ').map((el, index) => {
11 | const contentVerticalPosition = contentHeight =>
12 | rows > 1 ? contentHeight + rowHeight * index : contentHeight
13 | return (
14 |
15 |
23 |
31 |
39 |
47 |
54 |
55 | )
56 | })}
57 |
58 | )
59 | }
60 | RepeatableTableRows.metadata = {
61 | name: 'Lukas Werner',
62 | github: 'sherpaPSX',
63 | description:
64 | 'Repeatable table rows. You can easily define number of rows in props and generate then in one svg',
65 | filename: 'RepeatableTableRows',
66 | }
67 |
68 | export default RepeatableTableRows
69 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/ResponsiveArticle.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const ResponsiveArticle = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | )
41 | }
42 |
43 | ResponsiveArticle.metadata = {
44 | name: 'Ashiru Olawale', // My name
45 | github: 'walebant', // Github username
46 | description: 'A responsive article loader that fits every screen 🎉', // Little tagline
47 | filename: 'ResponsiveArticle', // filename of your loader
48 | }
49 |
50 | export default ResponsiveArticle
51 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/ResponsiveProduct.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const ResponsiveProduct = props => (
5 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 | )
70 |
71 | ResponsiveProduct.metadata = {
72 | name: 'Ravisankar Chinnam', // My name
73 | github: 'ravisankarchinnam', // Github username
74 | description: 'Full width responsive Ecommerce Product', // Little tagline
75 | filename: 'ResponsiveProduct', // filename of your loader
76 | }
77 |
78 | export default ResponsiveProduct
79 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/RotatingGallery.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const RotatingGallery = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | )
14 | }
15 |
16 | RotatingGallery.metadata = {
17 | name: 'Marius Jørgensen',
18 | github: 'marjorg',
19 | description: 'A rotaing gallery',
20 | filename: 'RotatingGallery',
21 | }
22 |
23 | export default RotatingGallery
24 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/ShoppingLoader.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import ContentLoader from "react-content-loader"
3 |
4 | const ShoppingLoader = props => {
5 | return (
6 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | )
33 | }
34 |
35 | ShoppingLoader.metadata = {
36 | name: 'Nitish sharma',
37 | github: 'Nitz2611',
38 | description: 'A loading skeleton for shopping website',
39 | filename:'ShoppingLoader'
40 | }
41 |
42 | export default ShoppingLoader
43 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Sidebar.jsx:
--------------------------------------------------------------------------------
1 | import ContentLoader from 'react-content-loader'
2 | import React from 'react'
3 |
4 | const SidebarLoader = () => {
5 | return (
6 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | A
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | )
59 | }
60 |
61 | SidebarLoader.metadata = {
62 | name: 'Fahim Hasasn',
63 | github: 'fahim-tonmoy',
64 | description: 'A loading skeleton for your playlist.',
65 | filename: 'Sidebar',
66 | }
67 |
68 | export default SidebarLoader
69 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/SnapchatThread.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const SnapchatThread = props => {
5 | return (
6 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | )
23 | }
24 |
25 | SnapchatThread.metadata = {
26 | name: 'Marius Jørgensen',
27 | github: 'marjorg',
28 | description: 'A singular Snapchat conversation',
29 | filename: 'SnapchatThread',
30 | }
31 |
32 | export default SnapchatThread
33 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Table.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const TableRow = props => {
5 | const random = Math.random() * (1 - 0.7) + 0.7
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | )
18 | }
19 |
20 | const Table = props => (
21 |
22 | {Array(10)
23 | .fill('')
24 | .map((e, i) => (
25 |
30 | ))}
31 |
32 | )
33 |
34 | Table.metadata = {
35 | name: 'DaniloWoz',
36 | github: 'danilowoz',
37 | description: 'Table with the width of the dynamic rows',
38 | filename: 'Table',
39 | }
40 |
41 | export default Table
42 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/TableLoader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const TableLoader = props => (
5 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 | )
66 |
67 | TableLoader.metadata = {
68 | name: 'Sridhar Easwaran',
69 | github: 'sridhareaswaran',
70 | description: 'Loader for Tables',
71 | filename: 'TableLoader',
72 | }
73 |
74 | export default TableLoader
75 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/TaskList.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const TaskList = props => {
5 | return (
6 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | )
23 | }
24 |
25 | TaskList.metadata = {
26 | name: 'Abraham Calsin',
27 | github: 'abrahamcalsin',
28 | description: 'Loading a list of tasks.',
29 | filename: 'TaskList',
30 | }
31 |
32 | export default TaskList
33 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/ThreeDots.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const ThreeDots = props => (
5 |
12 |
13 |
14 |
15 |
16 | )
17 |
18 | ThreeDots.metadata = {
19 | name: 'RioF',
20 | github: 'clariokids',
21 | description: 'Three Dots',
22 | filename: 'ThreeDots',
23 | }
24 |
25 | export default ThreeDots
26 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Twitter.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import ContentLoader from "react-content-loader"
3 |
4 | const Twitter = (props) => (
5 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | )
22 |
23 | Twitter.metadata = {
24 | name: 'Sagi', // My name
25 | github: 'sagi403', // Github username
26 | description: 'Twitter generic text with image', // Little tagline
27 | filename: 'Twitter', // filename of your loader
28 | }
29 |
30 | export default Twitter
31 |
32 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/UpworkJobLoader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const UpworkJobLoader = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | )
14 | }
15 |
16 | UpworkJobLoader.metadata = {
17 | name: 'Ahsan Ullah', // My name
18 | github: 'IamAhsanMani', // Github username
19 | description: 'Upwork Job',
20 | filename: 'UpworkJobLoader',
21 | }
22 |
23 | export default UpworkJobLoader
24 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/UserReviewSkype.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const UserReviewSkype = props => {
5 | return (
6 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | )
31 | }
32 |
33 | UserReviewSkype.metadata = {
34 | name: 'Pushp Vashisht',
35 | github: 'pushp1997',
36 | description: 'A User Review with Skype like user image.',
37 | filename: 'UserReviewSkype',
38 | }
39 |
40 | export default UserReviewSkype
41 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/XYChart.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const XYChart = props => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | )
20 | }
21 |
22 | XYChart.metadata = {
23 | name: 'XYChart', // My name
24 | github: 'ankursehdev', // Github username
25 | description: 'XY Chart Loading', // Little tagline
26 | filename: 'XYChart', // filename of your loader
27 | }
28 |
29 | export default XYChart
30 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/Youtube.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const Youtube = props => (
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | )
34 |
35 | Youtube.metadata = {
36 | name: 'Akash Bambhaniya',
37 | github: 'Akashnb', // Github username
38 | description: 'Youtube',
39 | filename: 'Youtube', // filename of your loader
40 | }
41 |
42 | export default Youtube
43 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/YoutubeFresh.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const YoutubeFresh = props => (
5 |
6 |
7 |
8 |
9 |
10 |
11 | )
12 |
13 | YoutubeFresh.metadata = {
14 | name: 'Costal Oktopus',
15 | github: 'coktopus', // Github username
16 | description: 'Youtube fresh',
17 | filename: 'YoutubeFresh', // filename of your loader
18 | }
19 |
20 | export default YoutubeFresh
21 |
--------------------------------------------------------------------------------
/src/Gallery/insertYourLoaderHere/YoutubeMagic.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | const YoutubeMagic = ({
5 | heading = { width: 140, height: 24 },
6 | row = 2,
7 | column = 5,
8 | width = 1366,
9 | padding = 12,
10 | borderRadius = 4,
11 | ...props
12 | }) => {
13 | const list = []
14 |
15 | let height
16 |
17 | for (let i = 1; i <= row; i++) {
18 | const itemWidth = (width - padding * (column + 1)) / column
19 |
20 | const height1 = (itemWidth * 9) / 16
21 |
22 | const height2 = 20
23 |
24 | const height3 = 20
25 |
26 | const headingWidth = heading.width
27 |
28 | const headingHeight = heading.height
29 |
30 | const space =
31 | padding +
32 | headingHeight +
33 | (padding + height1) +
34 | (padding / 2 + height2) +
35 | height3 +
36 | padding * 6
37 |
38 | const yHeading = padding + space * (i - 1)
39 |
40 | list.push(
41 |
49 | )
50 |
51 | for (let j = 0; j < column; j++) {
52 | const x = padding + j * (itemWidth + padding)
53 |
54 | const y1 = yHeading + headingHeight + (padding * 3) / 2
55 |
56 | const y2 = y1 + padding + height1
57 |
58 | const y3 = y2 + padding / 2 + height2
59 |
60 | list.push(
61 | <>
62 |
70 |
71 |
79 | >
80 | )
81 |
82 | if (i === row) {
83 | height = y3 + height3
84 | }
85 | }
86 | }
87 |
88 | return (
89 |
95 | {list}
96 |
97 | )
98 | }
99 |
100 | YoutubeMagic.metadata = {
101 | name: 'I am Doong - I come from Việt Nam',
102 | github: 'toiladoong',
103 | description: 'YoutubeMagic',
104 | filename: 'YoutubeMagic',
105 | }
106 |
107 | export default YoutubeMagic
108 |
--------------------------------------------------------------------------------
/src/Gallery/style.css:
--------------------------------------------------------------------------------
1 | .showcase-filter {
2 | padding: 6em 0 1em 0;
3 | margin: 0 3em;
4 | max-width: 120em;
5 | display: flex;
6 | justify-content: space-between;
7 | border-bottom: 1px solid #eee;
8 | }
9 |
10 | .showcase-filter__results {
11 | font-size: var(--font-size__base);
12 | color: var(--color-grey-light);
13 | }
14 |
15 | .showcase-filter__results a {
16 | font: inherit;
17 | font-size: var(--font-size__medium);
18 | color: inherit;
19 | text-decoration: none;
20 | }
21 |
22 | .showcase-filter input {
23 | background: none;
24 | border: 1px solid #ddd;
25 | padding: 1em;
26 | font: inherit;
27 | font-size: 0.8em;
28 | border-radius: 4px;
29 | height: 1em;
30 | width: 20em;
31 | }
32 |
33 | .showcase {
34 | background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, #fff 5%);
35 | }
36 |
37 | .showcase-grid {
38 | padding: 0 2em;
39 | margin: 2em auto;
40 | max-width: 120em;
41 |
42 | display: flex;
43 | flex-wrap: wrap;
44 | }
45 |
46 | .showcase-item {
47 | min-height: 300px;
48 | box-sizing: border-box;
49 | margin: 15px;
50 | padding: 30px;
51 | width: calc((100% / 3) - 30px);
52 | background-color: #ffffff;
53 | border: 1px solid #e6e7eb;
54 | border-radius: 4px;
55 | box-shadow: 0 0.7px 0.9px rgba(0, 0, 0, 0.024),
56 | 0 1.9px 2.4px rgba(0, 0, 0, 0.035), 0 4.5px 5.7px rgba(0, 0, 0, 0.046),
57 | 0 15px 19px rgba(0, 0, 0, 0.07);
58 | }
59 |
60 | .showcase-component {
61 | height: 15vw;
62 | overflow: hidden;
63 | }
64 |
65 | .showcase-component svg {
66 | width: 100%;
67 | height: 100%;
68 | }
69 |
70 | .showcase-caption {
71 | box-sizing: border-box;
72 | padding-top: 16px;
73 | margin-top: 16px;
74 | margin-bottom: -8px;
75 | }
76 |
77 | .showcase-item h4 {
78 | margin: 0;
79 | margin-right: 0.7em;
80 | display: inline-block;
81 | width: 70%;
82 | font-weight: normal;
83 | font-size: var(--font-size__base);
84 | letter-spacing: 0.3px;
85 | }
86 |
87 | .showcase-item a {
88 | text-decoration: none;
89 | display: block;
90 | color: var(--color-grey-light);
91 | font-size: var(--font-size__base);
92 | letter-spacing: 0.5px;
93 | margin-top: 1em;
94 | }
95 |
96 | .showcase-item .source {
97 | float: right;
98 | margin-top: 0;
99 | color: var(--color-brand);
100 | }
101 |
102 | .showcase-item__new {
103 | display: flex;
104 | position: relative;
105 | }
106 |
107 | .showcase-item__new a {
108 | margin: auto;
109 | text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
110 | box-shadow: 0 4px 3px rgba(0, 0, 0, 0.04);
111 | position: relative;
112 | background: #eeeeee80;
113 | padding: 0.5em 1em;
114 | border-radius: 40px;
115 | transition: all 0.3s ease;
116 | top: -2em;
117 | z-index: 999;
118 | }
119 |
120 | .showcase-item__new a:before {
121 | content: '+';
122 | display: inline-block;
123 | margin-right: 0.5em;
124 | }
125 |
126 | .showcase-item__new-loader {
127 | position: absolute;
128 | left: 16px;
129 | right: 16px;
130 | bottom: 16px;
131 | width: calc(100% - 32px);
132 | height: calc(100% - 32px);
133 | }
134 |
--------------------------------------------------------------------------------
/src/assets/background-asset.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilowoz/create-content-loader/9808509d1163aa459007ea5ca18b032335a34d72/src/assets/background-asset.png
--------------------------------------------------------------------------------
/src/assets/circle.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | circle
5 | Created with Sketch.
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/assets/clone.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | background
5 |
6 |
7 |
8 | Layer 1
9 |
10 |
11 |
--------------------------------------------------------------------------------
/src/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilowoz/create-content-loader/9808509d1163aa459007ea5ca18b032335a34d72/src/assets/favicon.png
--------------------------------------------------------------------------------
/src/assets/grid.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/help.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
8 |
9 |
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/src/assets/rect.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | rect
5 | Created with Sketch.
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/src/assets/select.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | select
5 | Created with Sketch.
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/src/assets/trash.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
11 | trash
12 | Created with Sketch.
13 |
14 |
15 |
16 |
18 |
20 |
22 |
24 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
41 |
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/src/assets/vue.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/src/components/Config.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import trashIcon from '../assets/trash.svg'
4 |
5 | const Config = ({
6 | handleCheckbox,
7 | handleImageAsBackground,
8 | handleInput,
9 | handleColor,
10 | height,
11 | imageAsBackground,
12 | backgroundColor,
13 | resetColors,
14 | rtl,
15 | gridVisibility,
16 | foregroundColor,
17 | speed,
18 | width,
19 | }) => (
20 |
21 |
22 |
Canvas size
23 |
24 |
25 |
33 | width (in px)
34 |
35 |
36 |
37 |
45 | height (in px)
46 |
47 |
48 |
49 |
50 |
51 | Colors{' '}
52 |
53 | Reset
54 |
55 |
56 |
57 |
58 |
65 | Background color
66 |
67 |
68 |
69 |
76 | Foreground color
77 |
78 |
79 |
80 |
81 |
Configurations
82 |
83 |
90 | speed (in s)
91 |
92 |
93 |
Right-to-left
94 |
95 |
96 |
104 |
105 |
106 |
107 |
108 |
109 |
Select a image to set as background
110 |
111 |
112 |
118 |
119 | {imageAsBackground && (
120 | handleImageAsBackground(null)}
122 | className="app-handler__trash"
123 | >
124 |
125 |
126 | )}
127 |
128 |
129 |
130 |
131 |
Grid visibility
132 |
133 |
134 |
142 |
143 |
144 |
145 |
146 | )
147 |
148 | export default Config
149 |
--------------------------------------------------------------------------------
/src/components/Highlighter.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
3 | import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
4 |
5 | const Highlighter = ({ code }) => {
6 | return (
7 |
8 | {code}
9 |
10 | )
11 | }
12 |
13 | export default Highlighter
14 |
--------------------------------------------------------------------------------
/src/components/Layout/Header.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactGA from 'react-ga'
3 |
4 | import '../style/Header.css'
5 | import Helmet from 'react-helmet'
6 |
7 | import pkg from '../../../package.json'
8 |
9 | const Header = () => {
10 | return (
11 | <>
12 |
13 |
17 |
18 |
19 |
20 |
21 |
22 | Create React Content Loader
23 | {pkg.dependencies['react-content-loader']}
24 |
25 |
26 | Tool to easily create your animated skeleton-screen components,
27 | replacing usual loading and delivering better experiences for users,
28 | giving a wireframe of your pages like placeholders boxes for content
29 | and images. Supports React, React Native, Vue, and vanilla HTML.
30 |
31 |
32 |
33 |
61 |
62 | >
63 | )
64 | }
65 |
66 | export default Header
67 |
--------------------------------------------------------------------------------
/src/components/LearnMore.tsx:
--------------------------------------------------------------------------------
1 | const links = [
2 | {
3 | title: 'Documentation',
4 | link: 'https://github.com/danilowoz/react-content-loader',
5 | },
6 | {
7 | title: 'Examples',
8 | link: 'https://danilowoz.github.io/react-content-loader/',
9 | },
10 | ]
11 |
12 | const content = [
13 | {
14 | title: 'How to create and customize react-content-loader (by Sara Fotros)',
15 | link:
16 | 'https://medium.com/better-programming/create-and-customize-react-content-loader-c630a3b917ac',
17 | },
18 | {
19 | title:
20 | 'Implementing loading placeholder with react-content-loader (by Kohei Asai)',
21 | link:
22 | 'https://www.kohei.dev/posts/react-content-loader?postId=react-content-loader&hl=en-US',
23 | },
24 | ]
25 |
26 | const LearnMore = () => {
27 | return (
28 |
29 |
Links:
30 |
31 | {links.map(({ link, title }) => {
32 | return (
33 |
34 |
35 | {title}
36 |
37 |
38 | )
39 | })}
40 |
41 |
How to use it:
42 |
43 | {content.map(({ link, title }) => {
44 | return (
45 |
46 |
47 | {title}
48 |
49 |
50 | )
51 | })}
52 |
53 | )
54 | }
55 |
56 | export default LearnMore
57 |
--------------------------------------------------------------------------------
/src/components/Loading.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ContentLoader from 'react-content-loader'
3 |
4 | // Inception...
5 | const Loading = props => (
6 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | )
25 |
26 | export default Loading
27 |
--------------------------------------------------------------------------------
/src/components/SEO.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Helmet from 'react-helmet'
3 |
4 | const SEO = () => {
5 | const currentTitle = 'React Skeleton - Create Content Loader'
6 | const metaDescription =
7 | 'Tool to easily create your animated skeleton components, replacing usual loading, giving a wireframe of your pages like placeholders for content and images.'
8 | const siteUrl = 'http://skeletonreact.com/'
9 | const author = '@danilowoz'
10 | const keywords = [
11 | 'react',
12 | 'react-native',
13 | 'vue',
14 | 'skeleton',
15 | 'svg',
16 | 'placeholder',
17 | 'wireframe',
18 | 'loader',
19 | 'loading',
20 | 'content',
21 | ]
22 |
23 | return (
24 | 0
84 | ? {
85 | name: `keywords`,
86 | content: keywords.join(`, `),
87 | }
88 | : []
89 | )}
90 | />
91 | )
92 | }
93 |
94 | export default SEO
95 |
--------------------------------------------------------------------------------
/src/components/Upload/Upload.jsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect, useState, useCallback } from 'react'
2 | import ReactGA from 'react-ga'
3 |
4 | import './style.css'
5 | import { parseSvg } from './service'
6 | import Loading from '../Loading'
7 |
8 | const ERROR_TIMEOUT = 4000
9 |
10 | const Upload = ({ handleSvg }) => {
11 | const refContainer = useRef()
12 | const [hover, setHover] = useState(false)
13 | const [error, setError] = useState()
14 | const [loading, setLoading] = useState()
15 |
16 | const submit = useCallback(
17 | async file => {
18 | setLoading(true)
19 |
20 | const { ok, message } = await parseSvg(file)
21 | if (ok) {
22 | handleSvg(message)
23 | } else {
24 | setError(message)
25 |
26 | setTimeout(() => {
27 | setError()
28 | }, ERROR_TIMEOUT)
29 | }
30 |
31 | setTimeout(() => {
32 | setLoading(false)
33 | }, 300)
34 |
35 | ReactGA.event({
36 | category: 'Parse SVG',
37 | action: 'Upload',
38 | })
39 | },
40 | [handleSvg, setLoading]
41 | )
42 |
43 | const handleDragIn = e => {
44 | e.preventDefault()
45 | e.stopPropagation()
46 |
47 | setHover(true)
48 | }
49 | const handleDragOut = e => {
50 | e.preventDefault()
51 | e.stopPropagation()
52 |
53 | setHover(false)
54 | }
55 |
56 | const handleDrop = useCallback(
57 | e => {
58 | e.preventDefault()
59 | e.stopPropagation()
60 |
61 | if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
62 | const file = e.dataTransfer.files[0]
63 |
64 | setHover(false)
65 |
66 | if (file.type !== 'image/svg+xml') {
67 | setError('Only SVG files are allowed.')
68 |
69 | setTimeout(() => {
70 | setError()
71 | }, ERROR_TIMEOUT)
72 |
73 | return
74 | }
75 |
76 | submit(e.dataTransfer.files[0])
77 | }
78 | },
79 | [submit]
80 | )
81 |
82 | useEffect(() => {
83 | const div = refContainer.current
84 |
85 | div.addEventListener('dragenter', handleDragIn)
86 | div.addEventListener('dragleave', handleDragOut)
87 | div.addEventListener('drop', handleDrop)
88 |
89 | return () => {
90 | div.removeEventListener('dragenter', handleDragIn)
91 | div.removeEventListener('dragleave', handleDragOut)
92 | div.removeEventListener('drop', handleDrop)
93 | }
94 | }, [handleDrop])
95 |
96 | return (
97 |
98 | {loading ? (
99 |
100 | ) : (
101 | <>
102 |
107 |
108 |
109 | Select or drop here a SVG file
110 | to be converted in a loading.
111 |
112 |
113 | {error &&
{error}
}
114 |
115 |
submit(file.target.files[0])}
118 | multiple={false}
119 | />
120 |
121 |
122 |
123 | Make sure to remove all images and fonts from SVG file.
124 |
125 | >
126 | )}
127 |
128 | )
129 | }
130 |
131 | export default Upload
132 |
--------------------------------------------------------------------------------
/src/components/Upload/UploadSnippet.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import ReactGA from 'react-ga'
3 |
4 | import './style.css'
5 | import { parseSvg } from './service'
6 | import Loading from '../Loading'
7 |
8 | const ERROR_TIMEOUT = 4000
9 |
10 | const UploadSnippet = ({ handleSvg }) => {
11 | const [value, setValue] = useState('')
12 | const [error, setError] = useState()
13 | const [loading, setLoading] = useState()
14 |
15 | const submit = async () => {
16 | setLoading(true)
17 |
18 | const { ok, message } = await parseSvg(value)
19 | if (ok) {
20 | handleSvg(message)
21 | } else {
22 | setError(message)
23 |
24 | setTimeout(() => {
25 | setError()
26 | }, ERROR_TIMEOUT)
27 | }
28 |
29 | setTimeout(() => {
30 | setLoading(false)
31 | }, 300)
32 |
33 | ReactGA.event({
34 | category: 'Parse SVG',
35 | action: 'Snippet',
36 | })
37 | }
38 |
39 | return (
40 |
41 | {loading ? (
42 |
43 | ) : (
44 | <>
45 |
46 | Paste bellow a SVG snippet code or only the shape elements.
47 |
48 | Submit
49 |
50 |
51 |
52 | {error &&
{error}
}
53 |
54 |
79 | )
80 | }
81 |
82 | export default UploadSnippet
83 |
--------------------------------------------------------------------------------
/src/components/Upload/constants.jsx:
--------------------------------------------------------------------------------
1 | export const PARSER_API =
2 | 'https://hm2fg6ktv4.execute-api.us-east-1.amazonaws.com/prd/svg/parser'
3 |
--------------------------------------------------------------------------------
/src/components/Upload/service.jsx:
--------------------------------------------------------------------------------
1 | import { PARSER_API } from './constants'
2 |
3 | export const parseSvg = async content => {
4 | let body = {}
5 |
6 | if (content.type) {
7 | body = {
8 | body: content,
9 | headers: {
10 | Accept: '*/*',
11 | 'Content-type': content.type,
12 | },
13 | }
14 | } else if (typeof content === 'string') {
15 | body = {
16 | body: content,
17 | }
18 | }
19 |
20 | const result = await fetch(PARSER_API, {
21 | method: 'POST',
22 | ...body,
23 | })
24 |
25 | return JSON.parse(await result.text())
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/Upload/style.css:
--------------------------------------------------------------------------------
1 | .upload-intro {
2 | color: #fff;
3 | text-align: center;
4 | margin: 3em auto 1em;
5 | line-height: 1.6;
6 | }
7 |
8 | .upload-disclaimer {
9 | color: var(--color-grey-light);
10 | text-align: center;
11 | font-size: 0.8em;
12 | margin: 0 auto 5em;
13 | }
14 |
15 | .upload-textarea {
16 | margin: 0 2.5em 1em;
17 | width: calc(100% - 5em);
18 | min-height: 210px;
19 | outline: 0;
20 | color: #fff;
21 | border: 1px solid var(--color-silver);
22 | border-radius: 9px;
23 | display: block;
24 | background: #ffffff0d;
25 | padding: 1em;
26 | box-shadow: 0 3.4px 4.3px rgba(0, 0, 0, 0.057),
27 | 0 11.4px 14.5px rgba(0, 0, 0, 0.083), 0 51px 65px rgba(0, 0, 0, 0.14);
28 | resize: vertical;
29 | box-sizing: border-box;
30 | }
31 |
32 | .upload-input-handle {
33 | margin: 3em 2.5em 1em;
34 | width: calc(100% - 5em);
35 | height: 250px;
36 | color: #fff;
37 | border: 1px dashed var(--color-silver);
38 | border-radius: 9px;
39 | display: block;
40 | padding: 1em;
41 | box-sizing: border-box;
42 | overflow: hidden;
43 | position: relative;
44 | display: flex;
45 | transition: all 0.2s ease;
46 | }
47 |
48 | .upload-error {
49 | margin-top: 1em;
50 | padding: 0.5em;
51 | border-radius: var(--border-radius);
52 | background-color: rgba(206, 17, 38, 0.05);
53 | color: #f85955;
54 | }
55 |
56 | .upload-input-handle--hover {
57 | border: 1px dashed #fff;
58 | }
59 |
60 | .upload-input-handle > * {
61 | margin: auto;
62 | }
63 |
64 | .upload-input-handle .upload-intro {
65 | margin: 0;
66 | }
67 |
68 | .upload-input-handle input {
69 | font-size: 2000%;
70 | position: absolute;
71 | left: 0;
72 | right: 0;
73 | top: 0;
74 | bottom: 0;
75 | opacity: 0;
76 | }
77 |
78 | .upload-body-textarea::placeholder {
79 | color: var(--color-grey-light);
80 | }
81 |
82 | .upload-button {
83 | margin-left: 1em;
84 | background: var(--color-brand);
85 | border: 0;
86 | color: #fff;
87 | padding: 0.5em 1em;
88 | border-radius: 4px;
89 | line-height: 1;
90 | cursor: pointer;
91 | }
92 |
--------------------------------------------------------------------------------
/src/components/style/Header.css:
--------------------------------------------------------------------------------
1 | /* Header */
2 | .app-header {
3 | grid-column: 1/3;
4 | margin-bottom: 3em;
5 | display: flex;
6 | align-items: flex-end;
7 | justify-content: space-between;
8 | max-width: 1380px;
9 | width: 100%;
10 | margin-left: auto;
11 | margin-right: auto;
12 | padding: 2em 0;
13 | position: relative;
14 | border-bottom: 1px solid var(--color-grey);
15 | }
16 |
17 | .app-header h1 {
18 | font-size: var(--font-size__main);
19 | margin: 0;
20 | font-weight: normal;
21 | color: #fff;
22 | }
23 |
24 | .app-header h1 strong {
25 | color: var(--color-brand);
26 | font-weight: inherit;
27 | }
28 |
29 | .app-header__logo {
30 | width: 63%;
31 | }
32 |
33 | .app-header__logo h2 {
34 | font-size: var(--font-size__tiny);
35 | font-weight: normal;
36 | color: var(--color-grey-light);
37 | margin-bottom: 0;
38 | }
39 |
40 | .app-header__logo span {
41 | font-size: 0.5em;
42 | opacity: 0.3;
43 | margin-left: 1em;
44 | top: -1em;
45 | position: relative;
46 | }
47 |
48 | .app-header__loader {
49 | height: 96px;
50 | }
51 |
52 | .app-header__aside {
53 | display: flex;
54 | justify-content: flex-end;
55 | align-items: center;
56 | }
57 |
58 | .app-header__aside > * {
59 | margin-left: 1.4em;
60 | }
61 |
62 | .donate-button {
63 | text-decoration: none;
64 | color: #fff;
65 | }
66 |
--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 |
4 | // @ts-ingore
5 | import App from './App.jsx'
6 |
7 | ReactDOM.render(
8 |
9 |
10 | ,
11 | document.getElementById('root')
12 | )
13 |
--------------------------------------------------------------------------------
/src/utils/getSnapshotFromSVG.js:
--------------------------------------------------------------------------------
1 | /* uniformly named URL object */
2 | var DOMURL = window.URL || window.webkitURL || window
3 |
4 | function svgSnapshot(svg_ref, fps, seconds) {
5 | /* DOM object element */
6 | this.svg_ref = svg_ref
7 |
8 | /* svg xml root */
9 | this.svg_root = svg_ref
10 |
11 | /* frames per second */
12 | this.fps = fps
13 |
14 | /* total animation duration in seconds */
15 | this.seconds = seconds
16 |
17 | this.svg_root.pauseAnimations()
18 |
19 | this.make_step = function(step, time) {
20 | if (time > this.seconds * 1000) {
21 | // animation ended
22 | return false
23 | }
24 |
25 | /* pause for snapshot */
26 | this.svg_root.pauseAnimations()
27 |
28 | /* save actual svg state as XML */
29 | var svg_xml = this.svg_root.outerHTML
30 |
31 | /* disable animation elements with simple replacing */
32 | // svg_xml = svg_xml.replace(new RegExp(' {
52 | console.error(e)
53 | }
54 |
55 | /* set image url */
56 | img.src = data_url
57 | }
58 |
59 | this.make_step_next = function(step, time, img) {
60 | /* create canvas */
61 | var canvas = document.createElement('canvas')
62 |
63 | canvas.setAttribute('width', this.svg_ref.clientWidth)
64 | canvas.setAttribute('height', this.svg_ref.clientHeight)
65 |
66 | canvas.style.border = '1px solid black'
67 |
68 | /* get canvas 2d contextr */
69 | var ctx = canvas.getContext('2d')
70 |
71 | /* drav loaded image onto it */
72 | ctx.drawImage(img, 0, 0)
73 |
74 | /* here we can get dataURL (base64 encoded url with image content) */
75 | var dataURL = canvas.toDataURL('image/png')
76 |
77 | /*
78 | and here you can do whatever you want - send image
79 | by ajax (that base64 encoded url which you can decode
80 | on serverside) or draw somewhere on page
81 | */
82 | var finalImg = document.createElement('img')
83 |
84 | finalImg.src = dataURL
85 | finalImg.style.border = '1px solid black'
86 |
87 | document.body.appendChild(finalImg)
88 |
89 | /*
90 | let animation continue - before image is loaded, the
91 | animation is paused - by this is achieved perfect
92 | timing in this serial process
93 | */
94 | this.svg_root.unpauseAnimations()
95 |
96 | var self = this
97 | var interval = 1000 / this.fps // one frame interval
98 |
99 | setTimeout(function() {
100 | self.make_step(step + 1, time + interval)
101 | }, interval)
102 | }
103 | }
104 |
105 | export default svgSnapshot
106 |
--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | export const numberFixed = num => Number(Number(num).toFixed())
2 |
3 | export const jsonToSVG = json => {
4 | const arr = json.objects
5 | let svg = ''
6 |
7 | arr.forEach(a => {
8 | const height = numberFixed(a.height * a.scaleY)
9 | const width = numberFixed(a.width * a.scaleX)
10 | const radius = numberFixed(a.radius * a.scaleX)
11 |
12 | if ((height === 0 && width === 0) || radius === 1) {
13 | return null
14 | }
15 |
16 | const factoryPath = element =>
17 | element.path.map(path => path.join(' ')).join(' ')
18 |
19 | if (a.type === 'rect') {
20 | const rotate = a.angle
21 | ? ` transform="rotate(${numberFixed(a.angle)}, ${numberFixed(
22 | a.left
23 | )}, ${numberFixed(a.top)})"`
24 | : ''
25 |
26 | svg += ` \n`
31 | } else if (a.type === 'circle') {
32 | svg += ` \n`
35 | } else if (a.type === 'path') {
36 | // TODO: move path
37 | // if (a.left !== 0 || a.top !== 0) {
38 | // svg += ` \n`
41 | // } else {
42 | // }
43 | svg += ` \n`
44 | }
45 | })
46 |
47 | return svg.trimRight()
48 | }
49 |
50 | export const createNode = html =>
51 | new DOMParser().parseFromString(html, 'text/html').body.firstChild
52 |
53 | export const SVGtoFabric = svg => {
54 | const arr = svg.split('\n')
55 | const obj = arr.map(s => {
56 | const item = createNode(s)
57 | const newObj = {}
58 |
59 | if (item !== null) {
60 | if (s.includes(' e !== undefined)
101 | }
102 |
103 | export const canvasAddedProp = target => {
104 | const newTarget = target
105 | const hasCircle =
106 | newTarget &&
107 | (newTarget.type === 'circle' ||
108 | (newTarget.type === 'activeSelection' &&
109 | newTarget._objects.some(o => o.type === 'circle')))
110 | if (hasCircle) {
111 | newTarget.lockUniScaling = true
112 | newTarget.lockRotation = true
113 | newTarget.angle = 0
114 | newTarget.originY = 'top'
115 | }
116 |
117 | return newTarget
118 | }
119 |
--------------------------------------------------------------------------------
/src/utils/keyboard.js:
--------------------------------------------------------------------------------
1 | export const KEY_CODES = {
2 | DELETE: 8,
3 | }
4 |
--------------------------------------------------------------------------------
/src/utils/presets.js:
--------------------------------------------------------------------------------
1 | export const facebook = `
2 |
3 |
4 |
5 |
6 |
7 | `
8 |
9 | export const instagram = `
10 |
11 |
12 |
13 | `
14 |
15 | export const code = `
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | `
24 |
25 | export const bulletList = `
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | `
34 |
--------------------------------------------------------------------------------
/static/share.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danilowoz/create-content-loader/9808509d1163aa459007ea5ca18b032335a34d72/static/share.png
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "noEmit": true,
15 | "jsx": "react-jsx",
16 |
17 | /* Linting */
18 | "strict": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "noFallthroughCasesInSwitch": true
22 | },
23 | "include": ["src"],
24 | "references": [{ "path": "./tsconfig.node.json" }]
25 | }
26 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "skipLibCheck": true,
5 | "module": "ESNext",
6 | "moduleResolution": "bundler",
7 | "allowSyntheticDefaultImports": true
8 | },
9 | "include": ["vite.config.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | define: {
8 | global: {},
9 | },
10 | })
11 |
--------------------------------------------------------------------------------