Hy-splash-screen-react NPM

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

splash screen react

1.0.1

1 year ago

1.0.0

1 year ago