Nocturnal Pumpkin Maelstrom

    reapop-theme-wybo-rtl

    0.4.3 • Public • Published

    reapop-theme-wybo-rtl

    npm version npm dependencies npm download/month gitter chat

    RTL theme for Reapop

    Compatibility

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

    Supported browsers

    Installation

    npm install reapop-theme-wybo-rtl --save
    

    or

    yarn add reapop-theme-wybo-rtl
    

    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 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?sourceMap&-minimize',
      'modules',
      'importLoaders=1',
      'localIdentName=[name]__[local]__[hash:base64:5]'
    ].join('&');
    
    module.exports = {
      module: {
        loaders: [{
          test: /\.css$/,
          loaders: ['style', 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 (
          <div>
            <NotificationsSystem theme={theme}/>
          </div>
        );
      }
    }

    Customize the theme

    Follow this guide : Reapop - Customize or create a theme

    License

    Reapop-theme-wybo is under GPL-3.0 License

    Install

    npm i reapop-theme-wybo-rtl

    DownloadsWeekly Downloads

    4

    Version

    0.4.3

    License

    GPL-3.0

    Last publish

    Collaborators

    • ex7r3me