Official theme for Reapop

Usage no npm install needed!

<script type="module">
  import kenettoReapopThemeWybo from 'https://cdn.skypack.dev/@kenetto/reapop-theme-wybo';



npm version npm dependencies npm download/month gitter chat

Official theme for Reapop


Tested and works with Reapop v0.6.0 or later in :

Supported browsers


npm install reapop-theme-wybo --save


Update webpack config

You have to define some loaders to handle files of theme. If it's not already the case, you need to install :

  • style-loader with npm install style-loader --save-dev
  • css-loader with npm install css-loader --save-dev
  • url-loader with npm install url-loader --save-dev
  • file-loader with npm install file-loader --save-dev

Look at this example, you can use it in for your project. Check out configuration of Reapop Demo to see a complete example.

// CSS loader with some configuration
// read https://github.com/webpack/css-loader to understand each query parameters
var CSSLoader = [

module.exports = {
  module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style-loader', CSSLoader]
    }, {
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "url-loader?limit=10000&minetype=application/font-woff"
    }, {
      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "file-loader"

Install Font Awesome

This theme doesn't include Font Awesome to let you install it the way you want:

With Webpack

  1. Install Font Awesome with npm install font-awesome --save

and import it in your app. Example :

import '!style-loader!css-loader!font-awesome/css/font-awesome.min.css';

With BootstrapCDN

Add this line in <head> of your main index.html file :

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

Set the theme

import React, {Component} from 'react';
import NotificationsSystem from 'reapop';
// 1. import Font Awesome
import '!style-loader!css-loader!font-awesome/css/font-awesome.min.css';
// 2. import reapop theme
import theme from 'reapop-theme-wybo';

class ATopLevelComponent extends Component {
  render() {
   // 3. set `theme` prop
    return (
        <NotificationsSystem theme={theme}/>

Customize the theme

Follow this guide : Reapop - Customize or create a theme


Reapop-theme-wybo is under MIT License