hy-splash-screen-react

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

npm install hy-splash-screen-react

Example Project Implemented

// Add - Impport module //
import SplashScreen from 'hy-splash-screen-react';
//----//

const App = () => {
  return (
    <div>
    
      // Add - Default components //
      <SplashScreen src="your logo" text="Your Company"/>
      //----//
      
    </div>
  );
};

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

	<SplashScreen 
		screenInterval="3000"
		screenBg="rgb(255, 255, 255,0.0)"
		screenBlur="blur(5px)"
		screenIndex="99"
		contentHeight="300px"
		contentWidth="250px"
		contentBg="rgb(85, 145, 230,0.99)"
		contentBlur="blur(5px)"
		contentShadow="0px 0px 3px 0px rgba(0,0,0,0.50)"
		contentRadius="5px"
		contentDirection="column"
		contentGap="1px"
		contentAlign="center"
		contentJustify="center"
		src="/images/logo.png"
		srcHeight="50px"
		srcWidth="50px"
		srcAlt="logo"
		animation="zoom-in"
		text="My Company"
		textColor="#ff00ff"
		textSize="1.5rem"
		textWeight="bold"
		textFont="Arial"
		cssScreen="css-screen"
		cssContent="css-content"
		cssSrc="css-src"
		cssText="css-text"
	/>

Happy Coding :) Follow Me: FOLLOW