Easily add splash images with animated text to React web sites. Requires React and CSS flexbox browser support.
Live Demo - The big image on the front page with the animated words "Solar League" written over it.
In the command prompt run:
npm install react-splash --save
Import all necessary modules:
import Splash from 'react-splash';
Somewhere in your render method:
<Splash
text="Project Name"
src="https://source.unsplash.com/FxU8KV7psMY/1600x900"
style={{ height: '70vh' }}
/>
-
text
string Animated text covering the splash image. At the moment, the maximum is two words only. Defaults to "React Splash". Optional. -
src
string Image source for the splash image. Defaults to "https://source.unsplash.com/weekly". Optional. -
style
object React inline styles object. Useful for setting splash image height. Defaults to { height: '100vh' }. Optional.
Children are ignored.
This component is compatible with universal or server side rendering (SSR).
In order to start from scratch we'll use Facebook react starter kit called Create React App. In the command prompt type:
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm install react-splash --save
subl src/App.js #open with Sublime Text. Or use any other text editor.
npm start
Copy and paste the following code into app.js:
import React, { Component } from 'react';
import Splash from 'react-splash';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Splash
text="Project Name"
src="https://source.unsplash.com/FxU8KV7psMY/1600x900"
style={{ height: '60vh' }}
/>
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
Save it, then open https://localhost:3000/ to see the result.
Clone the this repository using the following command:
git clone https://github.com/rnosov/react-splash.git
In the cloned directory, you can run following commands:
Installs required node modules
Builds the package for production to the dist
folder
Runs tests
Copyright © 2016 Roman Nosov. This source code is licensed under the MIT license.