Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@kenetto/reapop-theme-wybo

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@kenetto/reapop-theme-wybo

Official theme for Reapop

1.0.2
Source
npm

Version published: 6 years ago

Weekly downloads: 2

Maintainers: 2

Weekly downloads

Created: 6 years ago

Source

reapop-theme-wybo

Official theme for Reapop

Compatibility

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

Supported browsers

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 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"
    }]
  }
};

Install Font Awesome

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

With Webpack

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 MIT License

Keywords

FAQs

What is @kenetto/reapop-theme-wybo?

Is @kenetto/reapop-theme-wybo popular?

Is @kenetto/reapop-theme-wybo well maintained?

Package last updated on 21 Oct 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install