react-splash
v0.1.0
Published
Easily add splash images with animated text to React web sites
Downloads
18
Maintainers
Readme
React Splash
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.
tl;dr
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' }}
/>
Documentation
Properties
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
Children are ignored.
Universal Rendering
This component is compatible with universal or server side rendering (SSR).
Step by Step Instructions
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.
Forking This Package
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:
npm install
Installs required node modules
npm run build
Builds the package for production to the dist
folder
npm test
Runs tests
License
Copyright © 2016 Roman Nosov. This source code is licensed under the MIT license.