https://github.com/donavon/splashr
A React component that takes the effort out of adding a Splash Screen to your web application.
https://github.com/donavon/splashr
hooks react reactjs splash-screen splashscreen
Last synced: 7 months ago
JSON representation
A React component that takes the effort out of adding a Splash Screen to your web application.
- Host: GitHub
- URL: https://github.com/donavon/splashr
- Owner: donavon
- License: mit
- Created: 2019-02-26T20:43:46.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-01-17T13:04:56.000Z (over 3 years ago)
- Last Synced: 2025-02-22T12:39:18.379Z (8 months ago)
- Topics: hooks, react, reactjs, splash-screen, splashscreen
- Language: JavaScript
- Homepage:
- Size: 345 KB
- Stars: 21
- Watchers: 2
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🌊 Splashr
A React component that takes the effort out of adding a Splash Screen to your web application.
❤️ it? ⭐️ it on [GitHub](https://github.com/donavon/splashr/stargazers)
or [Tweet](https://twitter.com/intent/tweet?text=Check%20out%20%F0%9F%8C%8ASplashr.%20A%20custom%20React%20component%20that%20adds%20a%20splash%20screen%20to%20your%20web%20app.&url=https%3A%2F%2Fgithub.com%2Fdonavon%2Fsplashr&via=donavon&hashtags=reactjs,hooks,splashscreen)
about it.
[](https://badge.fury.io/js/splashr)
[](#contributors)
## New in Version 0.3.x
* Support for [React Suspense](https://reactjs.org/docs/code-splitting.html) and lazy loading of components (see below for details)!
## Installation
```bash
$ npm i splashr
```
or
```bash
$ yarn add splashr
```
⚠️ Note: Splashr has a peerDependency on React 16.8.0 or greater.
## Basic Usage
Here is a simple example use of Splashr.
```js
import Splashr from 'splashr';
const splash = (
Welcome to my app
);
const App = () => (
This is my app.
);
```
### Props
Here are some of the props that you can use to customize Splashr. (\* = required)
| Parameter | Description |
| :-------- | :----------------------------------------- |
| `splash`\* | Your rendered splash screen. |
| `children`\* | Your app. |
| `minDelay` | How long to show the splash screen in msecs. Default = 2000 |
| `extend` | A boolean that will extend the splash screen. Set to `true` to extend the splash screen past `minDelay`, maybe to load a resource. Default = `false`. |
| `transitionTime` | By default, Splashr will transition between the splash screen and your app. This value will set the transition time in msecs. To disable the transition, set `transitionTime` to 0. Default = 700 |
| `transitionTimingFunction` | The string representing the [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) to perform on the transition. Default = "ease" |
## Suspense
Starting with version 0.3.0, there is support for React Suspense and lazy loading.
Let's say you lazy load some components. With Suspense,
the splash screen will remin visible for _at least_ 2 seconds
(by default, or whatever value you speify in `minDelay`),
but possibly longer if the components have yet to load.
This is very useful for slower 2G/3G connections on mobile devices.
One might do this to get the splash screen rendered as soon as possible while the rest of the app is sill loading (or
[First Meaningful Paint](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint)).
To support Suspense, simply change `` to ``.
All props are supported except `extend`, which is ignored with ``.
```js
import Splashr from 'splashr';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
const splash = (
Welcome to my app
);
const App = () => (
);
```
### Why not just use React's `Suspense`?
`Splashr.Suspense` is simular to React's built-in `Suspense` (in fact it's built on top of it), but supports a smooth transition between the splash screen and the rest of the app. it also supports a `minDelay`, which React's `Suspense` does not.
## Sample Apps
Here is a list of apps build with Splashr.
If you have an app you would like to include on this list, open a PR.
* [Demo App on CodeSandbox](https://codesandbox.io/s/9on6o2076y) - by [@donavon](https://twitter.com/donavon)
* [Splash.Suspense demo on CodeSandbox](https://codesandbox.io/s/o5pqnq49w6) - by [@donavon](https://twitter.com/donavon)
## License
**[MIT](LICENSE)** Licensed
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):
| [
Donavon West](http://donavon.com)
[🚇](#infra-donavon "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/donavon/splashr/commits?author=donavon "Tests") [💡](#example-donavon "Examples") [🤔](#ideas-donavon "Ideas, Planning, & Feedback") [🚧](#maintenance-donavon "Maintenance") [👀](#review-donavon "Reviewed Pull Requests") [🔧](#tool-donavon "Tools") [💻](https://github.com/donavon/splashr/commits?author=donavon "Code") | [
Jack Cross](https://github.com/crosscompile)
[🤔](#ideas-crosscompile "Ideas, Planning, & Feedback") [👀](#review-crosscompile "Reviewed Pull Requests") |
| :---: | :---: |
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!