โ ๏ธ This package is deprecated because this theme is now directly included in the lastest version of reapop package.
Official theme for Reapop
Tested and works with Reapop v0.6.0 or later in :
![]() IE / Edge |
![]() Firefox |
![]() Chrome |
![]() Safari |
![]() Opera |
---|---|---|---|---|
IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
npm install reapop-theme-wybo --save
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 = [
'css-loader?sourceMap&-minimize',
'modules',
'importLoaders=1',
'localIdentName=[name]__[local]__[hash:base64:5]'
].join('&');
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"
}]
}
};
This theme doesn't include Font Awesome to let you install it the way you want:
- 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';
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">
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 (
<div>
<NotificationsSystem theme={theme}/>
</div>
);
}
}
Follow this guide : Reapop - Customize or create a theme
Reapop-theme-wybo is under MIT License