https://github.com/fitri-hy/hy-splash-screen-react
Simple project module (Splash Screen) for ReactJS
https://github.com/fitri-hy/hy-splash-screen-react
react-components react-modules react-splash-screen splash-screen
Last synced: about 2 months ago
JSON representation
Simple project module (Splash Screen) for ReactJS
- Host: GitHub
- URL: https://github.com/fitri-hy/hy-splash-screen-react
- Owner: fitri-hy
- Created: 2024-03-08T09:13:29.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-08T09:57:39.000Z (over 2 years ago)
- Last Synced: 2025-12-30T13:15:02.672Z (5 months ago)
- Topics: react-components, react-modules, react-splash-screen, splash-screen
- Language: JavaScript
- Homepage:
- Size: 198 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Modules Splash Screen for React v.1.0.1
ReactJS modules are simple but have many advantages, one of which is that you can customize them freely.
## NPM Installation
```sh
npm install hy-splash-screen-react
```
## Example Project Implemented
```sh
// Add - Impport module //
import SplashScreen from 'hy-splash-screen-react';
//----//
const App = () => {
return (
// Add - Default components //
//----//
);
};
export default App;
```
## Customization
| Atribute |Key Example |Description|
|:- |:- |:-|
|`screenInterval="key?"` |`1000` `3000` |Time Interval (ms)|
|`screenBg="key?` |`rgba(0, 0, 0, 0.5)` `#ffffff` |Background screen|
|`screenBlur="key?` |`blur(5px)` |Background blur|
|`screenIndex="key?` |`1` `99` |Z-index|
|`contentHeight="key?` |`400px` |Content height|
|`contentWidth="key?` |`400px` |Content width|
|`contentBg="key?` |`rgba(0, 0, 0, 0.5)` `#ffffff` |Background Content|
|`contentBlur="key?` |`blur(5px)` |Background blur Content|
|`contentShadow="key?` |`0px 0px 5px rgba(0, 0, 0, 0.3)` |Content shadow|
|`contentRadius="key?` |`10px` `10%` |Border radius|
|`contentDirection="key?` |`column` `row` `row-reverse` `column-reverse` `initial` `inherit` |Content direction|
|`contentGap="key?` |`10px` |Content gap|
|`contentAlign="key?` |`center` `left` `right` |Content align|
|`contentJustify="key?` |`center` `left` `right` |Justify content|
|`src="key?` |`https://example.xx/logo.png` `/images/logo.png` |Insert images|
|`srcHeight="key?` |`150px` |Image height|
|`srcWidth="key?` |`150px` |Image width|
|`srcAlt="key?` |`logo` |Image alt|
|`animation="key?` |`fade-in` `fade-out` `slide-in-top` `slide-in-bottom` `slide-in-left` `slide-in-right` `zoom-in` `zoom-out` `rotate-in` `rotate-out` |Animation Content|
|`text="key?` |`Your Company` |Insert text|
|`textColor="key?` |`#ffff` `rgb(255, 255, 255)` |Text color|
|`textSize="key?` |`30px` `18rem` |Text Size|
|`textWeight="key?` |`normal` `bold` `bolder` `lighter` `number` `initial` `inherit |Text weight|
|`textFont="key?` |`Arial` |Font family|
|`cssScreen="key?` |`your-css` |Screen css custom|
|`cssContent="key?` |`your-css` |Content css custom|
|`cssSrc="key?` |`your-css` |Src css custom|
|`cssText="key?` |`your-css` |Text css custom|
## Full Customization
```sh
```
Happy Coding :)
Follow Me: FOLLOW