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 http://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.