{"id":16427070,"url":"https://github.com/donavon/splashr","last_synced_at":"2025-03-21T04:30:44.592Z","repository":{"id":44937897,"uuid":"172787521","full_name":"donavon/splashr","owner":"donavon","description":"A React component that takes the effort out of adding a Splash Screen to your web application.","archived":false,"fork":false,"pushed_at":"2022-01-17T13:04:56.000Z","size":353,"stargazers_count":21,"open_issues_count":4,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-22T12:39:18.379Z","etag":null,"topics":["hooks","react","reactjs","splash-screen","splashscreen"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/donavon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-26T20:43:46.000Z","updated_at":"2024-05-06T14:07:50.000Z","dependencies_parsed_at":"2022-09-04T22:30:39.943Z","dependency_job_id":null,"html_url":"https://github.com/donavon/splashr","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Fsplashr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Fsplashr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Fsplashr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Fsplashr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/donavon","download_url":"https://codeload.github.com/donavon/splashr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244109422,"owners_count":20399558,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hooks","react","reactjs","splash-screen","splashscreen"],"created_at":"2024-10-11T08:11:27.925Z","updated_at":"2025-03-21T04:30:44.267Z","avatar_url":"https://github.com/donavon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌊 Splashr\n\nA React component that takes the effort out of adding a Splash Screen to your web application.\n\n❤️ it? ⭐️ it on [GitHub](https://github.com/donavon/splashr/stargazers)\nor [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.\u0026url=https%3A%2F%2Fgithub.com%2Fdonavon%2Fsplashr\u0026via=donavon\u0026hashtags=reactjs,hooks,splashscreen)\nabout it.\n\n[![npm version](https://badge.fury.io/js/splashr.svg)](https://badge.fury.io/js/splashr)\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)\n\n\u003cdiv style=\"text-align: center\"\u003e\n\u003cimg src=\"https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/155/water-wave_1f30a.png\" alt=\"ocean wave\"\u003e\n\u003c/div\u003e\n\n\n## New in Version 0.3.x\n\n* Support for [React Suspense](https://reactjs.org/docs/code-splitting.html) and lazy loading of components (see below for details)!\n\n## Installation\n\n```bash\n$ npm i splashr\n```\n\nor\n\n```bash\n$ yarn add splashr\n```\n\n⚠️ Note: Splashr has a peerDependency on React 16.8.0 or greater.\n\n## Basic Usage\n\nHere is a simple example use of Splashr.\n\n```js\nimport Splashr from 'splashr';\n\nconst splash = (\n  \u003cdiv className=\"splash-screen\"\u003e\n    Welcome to my app\n  \u003c/div\u003e\n);\n\nconst App = () =\u003e (\n  \u003cSplashr splash={splash}\u003e\n    \u003cdiv className=\"app\"\u003e\n      This is my app.\n    \u003c/div\u003e\n  \u003c/Splashr\u003e\n);\n```\n\n### Props\n\nHere are some of the props that you can use to customize Splashr. (\\* = required)\n\n\n| Parameter | Description                                |\n| :-------- | :----------------------------------------- |\n| `splash`\\*     | Your rendered splash screen. |\n| `children`\\*     |  Your app.  |\n| `minDelay`     |  How long to show the splash screen in msecs. Default = 2000  |\n| `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`.   |\n| `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  |\n| `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\"  |\n\n## Suspense\n\nStarting with version 0.3.0, there is support for React Suspense and lazy loading.\n\nLet's say you lazy load some components. With Suspense,\nthe splash screen will remin visible for _at least_ 2 seconds\n(by default, or whatever value you speify in `minDelay`),\nbut possibly longer if the components have yet to load.\nThis is very useful for slower 2G/3G connections on mobile devices.\n\nOne might do this to get the splash screen rendered as soon as possible while the rest of the app is sill loading (or\n[First Meaningful Paint](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint)).\n\nTo support Suspense, simply change `\u003cSplashr\u003e` to `\u003cSplashr.Suspense\u003e`.\nAll props are supported except `extend`, which is ignored with `\u003cSplashr.Suspense\u003e`.\n\n```js\nimport Splashr from 'splashr';\n\nconst OtherComponent = React.lazy(() =\u003e import('./OtherComponent'));\nconst AnotherComponent = React.lazy(() =\u003e import('./AnotherComponent'));\n\nconst splash = (\n  \u003cdiv className=\"splash-screen\"\u003e\n    Welcome to my app\n  \u003c/div\u003e\n);\n\nconst App = () =\u003e (\n  \u003cSplashr.Suspense splash={splash}\u003e\n    \u003cdiv className=\"app\"\u003e\n      \u003cOtherComponent /\u003e\n      \u003cAnotherComponent /\u003e\n    \u003c/div\u003e\n  \u003c/Splashr.Suspense\u003e\n);\n```\n\n### Why not just use React's `Suspense`?\n\n`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.\n\n## Sample Apps\n\nHere is a list of apps build with Splashr.\nIf you have an app you would like to include on this list, open a PR.\n\n* [Demo App on CodeSandbox](https://codesandbox.io/s/9on6o2076y) - by [@donavon](https://twitter.com/donavon)\n* [Splash.Suspense demo on CodeSandbox](https://codesandbox.io/s/o5pqnq49w6) - by [@donavon](https://twitter.com/donavon)\n\n## License\n\n**[MIT](LICENSE)** Licensed\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n| [\u003cimg src=\"https://avatars3.githubusercontent.com/u/887639?v=4\" width=\"100px;\" alt=\"Donavon West\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDonavon West\u003c/b\u003e\u003c/sub\u003e](http://donavon.com)\u003cbr /\u003e[🚇](#infra-donavon \"Infrastructure (Hosting, Build-Tools, etc)\") [⚠️](https://github.com/donavon/splashr/commits?author=donavon \"Tests\") [💡](#example-donavon \"Examples\") [🤔](#ideas-donavon \"Ideas, Planning, \u0026 Feedback\") [🚧](#maintenance-donavon \"Maintenance\") [👀](#review-donavon \"Reviewed Pull Requests\") [🔧](#tool-donavon \"Tools\") [💻](https://github.com/donavon/splashr/commits?author=donavon \"Code\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/1153686?v=4\" width=\"100px;\" alt=\"Jack Cross\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJack Cross\u003c/b\u003e\u003c/sub\u003e](https://github.com/crosscompile)\u003cbr /\u003e[🤔](#ideas-crosscompile \"Ideas, Planning, \u0026 Feedback\") [👀](#review-crosscompile \"Reviewed Pull Requests\") |\n| :---: | :---: |\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonavon%2Fsplashr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonavon%2Fsplashr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonavon%2Fsplashr/lists"}