# reapop-theme-wybo
[](https://www.npmjs.com/package/reapop-theme-wybo) [](https://www.npmjs.com/package/reapop-theme-wybo) [](https://www.npmjs.com/package/reapop-theme-wybo) [](https://gitter.im/LouisBarranqueiro/reapop-theme-wybo)
Official theme for [Reapop](https://github.com/LouisBarranqueiro/reapop)
## Compatibility
Tested and works with **Reapop v0.6.0 or later** in :
### Supported browsers
| [](http://godban.github.io/browsers-support-badges/)IE / Edge | [](http://godban.github.io/browsers-support-badges/)Firefox | [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari | [](http://godban.github.io/browsers-support-badges/)Opera |
| --------- | --------- | --------- | --------- | --------- |
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
## Installation
```
npm install reapop-theme-wybo --save
```
## Integration
### 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](https://github.com/LouisBarranqueiro/reapop) to see a complete example.
``` js
// 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"
}]
}
};
```
### 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 `` of your main `index.html` file :
``` html
```
### Set the theme
``` js
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 (
);
}
}
```
### Customize the theme
Follow this guide : [Reapop - Customize or create a theme](https://github.com/LouisBarranqueiro/reapop/blob/master/docs/api.md#customize-or-create-a-theme)
## License
Reapop-theme-wybo is under [MIT License](https://github.com/LouisBarranqueiro/reapop-theme-wybo/blob/master/LICENSE)
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera |
| --------- | --------- | --------- | --------- | --------- |
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
## Installation
```
npm install reapop-theme-wybo --save
```
## Integration
### 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](https://github.com/LouisBarranqueiro/reapop) to see a complete example.
``` js
// 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"
}]
}
};
```
### 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 `` of your main `index.html` file :
``` html
```
### Set the theme
``` js
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 (