React react-sweet-overlay

Aesthetic image overlay effects for React.

Installation

If you're using npm, in the command prompt run:

npm install react-sweet-overlay

Usage

import { OverlayTextCenter,OverlayTextUp,OverlayTextWithIcons } from 'react-sweet-overlay';

OverlayTextCenter

import React from 'react';
import { OverlayTextCenter } from 'react-sweet-overlay';
const App = () => (
  <OverlayTextCenter
    src="path/to/image.jpg"
    alt="Description"
    overlayText="Hover Text"
    overlayOpacity={0.7}
    overlaySpeed={0.5}
    height="300px"
    width="400px"
  />
);
export default App;

OverlayTextUp

import React from 'react';
import { OverlayTextUp } from 'react-sweet-overlay';
const App = () => (
  <OverlayTextUp
    src="path/to/image.jpg"
    alt="Description"
    overlayText="Hover Text"
    overlayOpacity={0.7}
    overlaySpeed={0.5}
    height="300px"
    width="400px"
  />
);
export default App;

OverlayTextWithIcons

import React from 'react';
import { OverlayTextWithIcons } from 'react-sweet-overlay';

const App = () => (
  <OverlayTextWithIcons
    src="path/to/image.jpg"
    alt="Description"
    overlayText="Hover Text"
    overlayOpacity={0.7}
    overlaySpeed={0.5}
    height="300px"
    width="400px"
    icons={[
      { className: 'fa fa-facebook', link: 'https://facebook.com' },
      { className: 'fa fa-instagram', link: 'https://instagram.com' },
      { className: 'fa fa-linkedin', link: 'https://linkedin.com' },
    ]}
  />
);

export default App;