vite-plugin-react-splash 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +74 -0
- package/dist/index.d.mts +28 -0
- package/dist/index.d.ts +28 -0
- package/dist/index.js +46 -0
- package/dist/index.mjs +46 -0
- package/package.json +45 -0
package/README.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# vite-plugin-react-splash
|
|
2
|
+
|
|
3
|
+
A Vite plugin and React hook for easy splash screen management in React applications.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install vite-plugin-react-splash
|
|
9
|
+
# or
|
|
10
|
+
yarn add vite-plugin-react-splash
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
### 1. Configure the Vite Plugin
|
|
16
|
+
|
|
17
|
+
In your `vite.config.ts`:
|
|
18
|
+
|
|
19
|
+
```typescript
|
|
20
|
+
import { defineConfig } from 'vite';
|
|
21
|
+
import react from '@vitejs/plugin-react';
|
|
22
|
+
import { viteSplashScreen } from 'vite-plugin-react-splash';
|
|
23
|
+
|
|
24
|
+
export default defineConfig({
|
|
25
|
+
plugins: [
|
|
26
|
+
react(),
|
|
27
|
+
viteSplashScreen({
|
|
28
|
+
logo: `<svg ...>...</svg>`, // Your SVG string
|
|
29
|
+
duration: 3000,
|
|
30
|
+
text: 'Loading My Awesome App...',
|
|
31
|
+
version: '1.0.0',
|
|
32
|
+
theme: {
|
|
33
|
+
light: { background: '#f0f0f0', color: '#333' },
|
|
34
|
+
dark: { background: '#1a1a1a', color: '#fff' }
|
|
35
|
+
},
|
|
36
|
+
animation: 'gradient-mesh' // Options: 'none', 'pulse', 'gradient-mesh'
|
|
37
|
+
}),
|
|
38
|
+
],
|
|
39
|
+
});
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### 2. Use the React Hook (Optional)
|
|
43
|
+
|
|
44
|
+
If you want to manually hide the splash screen (e.g., after initial data fetching):
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
import { useEffect } from 'react';
|
|
48
|
+
import { useSplashScreen } from 'vite-plugin-react-splash';
|
|
49
|
+
|
|
50
|
+
function App() {
|
|
51
|
+
const { hideSplashScreen } = useSplashScreen();
|
|
52
|
+
|
|
53
|
+
useEffect(() => {
|
|
54
|
+
// Some initialization logic
|
|
55
|
+
fetchData().then(() => {
|
|
56
|
+
hideSplashScreen();
|
|
57
|
+
});
|
|
58
|
+
}, []);
|
|
59
|
+
|
|
60
|
+
return <div>My App Content</div>;
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## Options
|
|
65
|
+
|
|
66
|
+
| Option | Type | Description |
|
|
67
|
+
| --- | --- | --- |
|
|
68
|
+
| `logo` | `string` | SVG string to display as the logo. |
|
|
69
|
+
| `duration` | `number` | Time in ms before the splash screen automatically hides. |
|
|
70
|
+
| `text` | `string` | Text to display below the logo. |
|
|
71
|
+
| `version` | `string` | Version string to display at the bottom. |
|
|
72
|
+
| `theme` | `object` | Light and dark mode colors. |
|
|
73
|
+
| `animation` | `string` | Animation style: `'none'`, `'pulse'`, `'gradient-mesh'`. |
|
|
74
|
+
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { Plugin } from 'vite';
|
|
2
|
+
|
|
3
|
+
interface SplashScreenOptions {
|
|
4
|
+
logo: string;
|
|
5
|
+
duration?: number;
|
|
6
|
+
text?: string;
|
|
7
|
+
version?: string;
|
|
8
|
+
theme?: {
|
|
9
|
+
light: {
|
|
10
|
+
background: string;
|
|
11
|
+
color: string;
|
|
12
|
+
};
|
|
13
|
+
dark: {
|
|
14
|
+
background: string;
|
|
15
|
+
color: string;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
animation?: 'none' | 'fade' | 'pulse' | 'slide-up' | 'gradient-mesh';
|
|
19
|
+
meshColors?: string[];
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
declare function useSplashScreen(): {
|
|
23
|
+
hideSplashScreen: () => void;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
declare function viteSplashScreen(options: SplashScreenOptions): Plugin;
|
|
27
|
+
|
|
28
|
+
export { type SplashScreenOptions, useSplashScreen, viteSplashScreen };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { Plugin } from 'vite';
|
|
2
|
+
|
|
3
|
+
interface SplashScreenOptions {
|
|
4
|
+
logo: string;
|
|
5
|
+
duration?: number;
|
|
6
|
+
text?: string;
|
|
7
|
+
version?: string;
|
|
8
|
+
theme?: {
|
|
9
|
+
light: {
|
|
10
|
+
background: string;
|
|
11
|
+
color: string;
|
|
12
|
+
};
|
|
13
|
+
dark: {
|
|
14
|
+
background: string;
|
|
15
|
+
color: string;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
animation?: 'none' | 'fade' | 'pulse' | 'slide-up' | 'gradient-mesh';
|
|
19
|
+
meshColors?: string[];
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
declare function useSplashScreen(): {
|
|
23
|
+
hideSplashScreen: () => void;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
declare function viteSplashScreen(options: SplashScreenOptions): Plugin;
|
|
27
|
+
|
|
28
|
+
export { type SplashScreenOptions, useSplashScreen, viteSplashScreen };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
'use strict';var react=require('react');var c=t=>{let{theme:e,animation:n,meshColors:r}=t,s=e?.light||{background:"#ffffff",color:"#000000"},o=e?.dark||{background:"#000000",color:"#ffffff"},i="";if(n==="pulse"&&(i+=`
|
|
2
|
+
.splash-logo { animation: splash-pulse 2s infinite; }
|
|
3
|
+
@keyframes splash-pulse {
|
|
4
|
+
0%, 100% { transform: scale(1); opacity: 1; }
|
|
5
|
+
50% { transform: scale(1.1); opacity: 0.8; }
|
|
6
|
+
}
|
|
7
|
+
`),n==="gradient-mesh"){let p=["#3498db","#9b59b6","#2ecc71"],d=r?.length?r:p,l=["center","20% 30%","80% 70%","40% 80%","70% 20%","10% 60%","90% 40%"],h=d.map((m,f)=>`radial-gradient(circle at ${l[f%l.length]}, ${m} 0%, transparent 50%)`).join(",");i+=`
|
|
8
|
+
#vite-splash-screen::before {
|
|
9
|
+
content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
|
|
10
|
+
background: ${h}; z-index: -1; animation: rotate-mesh 20s linear infinite;
|
|
11
|
+
opacity: 0.3; filter: blur(60px);
|
|
12
|
+
}
|
|
13
|
+
@keyframes rotate-mesh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
14
|
+
`;}return `
|
|
15
|
+
#vite-splash-screen {
|
|
16
|
+
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
|
|
17
|
+
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
18
|
+
z-index: 999999; transition: opacity 0.5s, visibility 0.5s;
|
|
19
|
+
font-family: -apple-system, system-ui, sans-serif;
|
|
20
|
+
background-color: ${s.background}; color: ${s.color};
|
|
21
|
+
}
|
|
22
|
+
#vite-splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
|
|
23
|
+
.splash-logo { width: 120px; height: 120px; margin-bottom: 20px; }
|
|
24
|
+
.splash-logo svg { fill: currentColor; width: 100%; height: 100%; }
|
|
25
|
+
.splash-text { font-size: 1.2rem; font-weight: 500; }
|
|
26
|
+
.splash-version { position: absolute; bottom: 20px; font-size: 0.8rem; opacity: 0.7; }
|
|
27
|
+
@media (prefers-color-scheme: dark) {
|
|
28
|
+
#vite-splash-screen { background-color: ${o.background}; color: ${o.color}; }
|
|
29
|
+
}
|
|
30
|
+
${i}
|
|
31
|
+
`.replace(/\s+/g," ").trim()};function g(){return {hideSplashScreen:react.useCallback(()=>{let e=document.getElementById("vite-splash-screen");e&&(e.classList.add("hidden"),setTimeout(()=>e.remove(),500));},[])}}function x(t){return {name:"vite-plugin-react-splash",transformIndexHtml(e){let n=c(t),{logo:r,text:s,version:o,duration:i=3e3}=t,a=`
|
|
32
|
+
<style>${n}</style>
|
|
33
|
+
<div id="vite-splash-screen">
|
|
34
|
+
<div class="splash-logo">${r}</div>
|
|
35
|
+
${s?`<div class="splash-text">${s}</div>`:""}
|
|
36
|
+
${o?`<div class="splash-version">v${o}</div>`:""}
|
|
37
|
+
</div>
|
|
38
|
+
<script>
|
|
39
|
+
(function(){
|
|
40
|
+
var d=${i},s=document.getElementById('vite-splash-screen');
|
|
41
|
+
if(s){setTimeout(function(){
|
|
42
|
+
s.classList.add('hidden');
|
|
43
|
+
setTimeout(function(){s.remove()},500);
|
|
44
|
+
},d)}
|
|
45
|
+
})();
|
|
46
|
+
</script>`.replace(/>\s+</g,"><").trim();return e.replace("<body>",`<body>${a}`)}}}exports.useSplashScreen=g;exports.viteSplashScreen=x;
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import {useCallback}from'react';var c=t=>{let{theme:e,animation:n,meshColors:r}=t,s=e?.light||{background:"#ffffff",color:"#000000"},o=e?.dark||{background:"#000000",color:"#ffffff"},i="";if(n==="pulse"&&(i+=`
|
|
2
|
+
.splash-logo { animation: splash-pulse 2s infinite; }
|
|
3
|
+
@keyframes splash-pulse {
|
|
4
|
+
0%, 100% { transform: scale(1); opacity: 1; }
|
|
5
|
+
50% { transform: scale(1.1); opacity: 0.8; }
|
|
6
|
+
}
|
|
7
|
+
`),n==="gradient-mesh"){let p=["#3498db","#9b59b6","#2ecc71"],d=r?.length?r:p,l=["center","20% 30%","80% 70%","40% 80%","70% 20%","10% 60%","90% 40%"],h=d.map((m,f)=>`radial-gradient(circle at ${l[f%l.length]}, ${m} 0%, transparent 50%)`).join(",");i+=`
|
|
8
|
+
#vite-splash-screen::before {
|
|
9
|
+
content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
|
|
10
|
+
background: ${h}; z-index: -1; animation: rotate-mesh 20s linear infinite;
|
|
11
|
+
opacity: 0.3; filter: blur(60px);
|
|
12
|
+
}
|
|
13
|
+
@keyframes rotate-mesh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
14
|
+
`;}return `
|
|
15
|
+
#vite-splash-screen {
|
|
16
|
+
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
|
|
17
|
+
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
18
|
+
z-index: 999999; transition: opacity 0.5s, visibility 0.5s;
|
|
19
|
+
font-family: -apple-system, system-ui, sans-serif;
|
|
20
|
+
background-color: ${s.background}; color: ${s.color};
|
|
21
|
+
}
|
|
22
|
+
#vite-splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
|
|
23
|
+
.splash-logo { width: 120px; height: 120px; margin-bottom: 20px; }
|
|
24
|
+
.splash-logo svg { fill: currentColor; width: 100%; height: 100%; }
|
|
25
|
+
.splash-text { font-size: 1.2rem; font-weight: 500; }
|
|
26
|
+
.splash-version { position: absolute; bottom: 20px; font-size: 0.8rem; opacity: 0.7; }
|
|
27
|
+
@media (prefers-color-scheme: dark) {
|
|
28
|
+
#vite-splash-screen { background-color: ${o.background}; color: ${o.color}; }
|
|
29
|
+
}
|
|
30
|
+
${i}
|
|
31
|
+
`.replace(/\s+/g," ").trim()};function g(){return {hideSplashScreen:useCallback(()=>{let e=document.getElementById("vite-splash-screen");e&&(e.classList.add("hidden"),setTimeout(()=>e.remove(),500));},[])}}function x(t){return {name:"vite-plugin-react-splash",transformIndexHtml(e){let n=c(t),{logo:r,text:s,version:o,duration:i=3e3}=t,a=`
|
|
32
|
+
<style>${n}</style>
|
|
33
|
+
<div id="vite-splash-screen">
|
|
34
|
+
<div class="splash-logo">${r}</div>
|
|
35
|
+
${s?`<div class="splash-text">${s}</div>`:""}
|
|
36
|
+
${o?`<div class="splash-version">v${o}</div>`:""}
|
|
37
|
+
</div>
|
|
38
|
+
<script>
|
|
39
|
+
(function(){
|
|
40
|
+
var d=${i},s=document.getElementById('vite-splash-screen');
|
|
41
|
+
if(s){setTimeout(function(){
|
|
42
|
+
s.classList.add('hidden');
|
|
43
|
+
setTimeout(function(){s.remove()},500);
|
|
44
|
+
},d)}
|
|
45
|
+
})();
|
|
46
|
+
</script>`.replace(/>\s+</g,"><").trim();return e.replace("<body>",`<body>${a}`)}}}export{g as useSplashScreen,x as viteSplashScreen};
|
package/package.json
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "vite-plugin-react-splash",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A Vite plugin and React hook for easy splash screen management in React apps.",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"module": "./dist/index.mjs",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.mjs",
|
|
12
|
+
"require": "./dist/index.js"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist"
|
|
17
|
+
],
|
|
18
|
+
"scripts": {
|
|
19
|
+
"build": "tsup src/index.ts --format cjs,esm --minify --clean --dts --treeshake --target es2020",
|
|
20
|
+
"dev": "tsup src/index.ts --format cjs,esm --watch --dts",
|
|
21
|
+
"deploy": "npm publish --access public",
|
|
22
|
+
"lint": "eslint src"
|
|
23
|
+
},
|
|
24
|
+
"keywords": [
|
|
25
|
+
"vite",
|
|
26
|
+
"vite-plugin",
|
|
27
|
+
"react",
|
|
28
|
+
"splash-screen",
|
|
29
|
+
"loading"
|
|
30
|
+
],
|
|
31
|
+
"author": "",
|
|
32
|
+
"license": "MIT",
|
|
33
|
+
"peerDependencies": {
|
|
34
|
+
"react": ">=16.8.0",
|
|
35
|
+
"vite": ">=2.0.0"
|
|
36
|
+
},
|
|
37
|
+
"devDependencies": {
|
|
38
|
+
"@types/react": "^18.0.0",
|
|
39
|
+
"react": "^18.0.0",
|
|
40
|
+
"tsup": "^8.0.0",
|
|
41
|
+
"typescript": "^5.0.0",
|
|
42
|
+
"vite": "^5.0.0"
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|