Socket
Socket
Sign inDemoInstall

@kenetto/reapop-theme-wybo

Package Overview
Dependencies
Maintainers
2
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@kenetto/reapop-theme-wybo

Official theme for Reapop


Version published
Weekly downloads
3
increased by200%
Maintainers
2
Weekly downloads
 
Created
Source

reapop-theme-wybo

npm version npm dependencies npm download/month gitter chat

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

Keywords

FAQs

Package last updated on 03 May 2019

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc