# react-welcome-page-updated

> Simple and beautiful welcome page for React

Latest version **1.1.0** (published 2022-07-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-welcome-page-updated
pnpm add react-welcome-page-updated
yarn add react-welcome-page-updated
bun add react-welcome-page-updated
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-07-20 |
| First published | 2022-07-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 186.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | herryyt |

## Links

- npm: https://www.npmjs.com/package/react-welcome-page-updated
- Homepage: https://github.com/utarit/react-welcome-page
- npm.io page: https://npm.io/package/react-welcome-page-updated

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^18.1.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.1.0
- [typescript](https://npm.io/package/typescript.md) ^4.7.4
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.5

## Recent versions

- 1.1.0 (latest) — 2022-07-20
- 1.0.0 — 2022-07-20
- 0.2.2 — 2022-07-20

## README

# REACT WELCOME PAGE

  

Simple beautiful welcome screen for your React and React Native apps.
https://github.com/utarit/react-welcome-page

  

## Example

### React Web App

![Example Screen](https://i.imgur.com/NfzYzz5.gif)


```
<Welcome
data={
		[
			{
			"backgroundColor": "rgb(73, 49, 91)",
			"textColor": "#EE79EA",
			"imageAnimation": "flipInX",
			"image": require('./images/1.png')
			},
			{
			"backgroundColor": "rgb(252, 187, 19)",
			"textColor": "#754600",
			"text": "My App",
			"imageAnimation": "slideInUp",
			"textAnimation": "slideInLeft",
			"image": require('./images/2.png')
			},
			{
			"backgroundColor": "rgb(156, 196, 76)",
			"textColor": "#344115",
			"text": "Green Elephant",
			"image": require('./images/3.png')
			},
			{
			"backgroundColor": "rgb(4, 116, 188)",
			"textColor": "#FFFFFF",
			"text": "Save the World",
			"textAnimation": "fadeInUp",
			"image": require('./images/4.png')
			}
		]
}
/>

```
## Smart Color Picking Tool

  

To ease your work, you can use this tool to generate your <Welcome ... /> component easily.

https://utarit.github.io/react-welcome-page-color-form/
  

### Installing

```
npm install --save react-welcome-page
```

  

### Using

  

```
import Welcome from 'react-welcome-page'

...
  

render(){

return(
<div id='my-container'>
<Welcome
		loopDuration={1100}
		data={[
		{
		image: require('./image_path/mypic1.png),
		text: 'My Quote',
		imageAnimation: 'flipInX',
		textAnimation: 'bounce',
		backgroundColor: '#FF3354',
		textColor: '#002134'
		},
		{
		image: require('./image_path/mypic2.png),
		text: 'My Quote',
		},
		{
		image: require('./image_path/mypic3.png),
		textAnimation: 'rotateIn'
		}
	]}

/>

...Rest of the app

  
</div>
)}

```

### Table of Contents


| Prop | Requirement | Default| Type
|--|--|--|--|
| loopDuration | not required | 1000 (ms) | number
|image | **required** | - | require('path of image') or 'http:// imageurl.png' (I suggest using a local image)
|text|not required | '' | string
|imageAnimation |not required | 'rotateIn' | string* (Only Web)
|textAnimation |not required | 'fadeInDown' | string* (Only Web)
|backgroundColor|not required| 'whitesmoke' | string as HEX '#123456' or RGB 'rgb(219, 123, 97)'
|textColor|not required| 'whitesmoke' | string as HEX '#123456' or RGB 'rgb(219, 123, 97)'

  

**Animations taken from animate.css (https://daneden.github.io/animate.css/), you can only use these animations.*

**In React Native, you do not have animation options*

---
_Source: https://npm.io/package/react-welcome-page-updated · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._