Export CSS Seperately

README.md

@@ -35,6 +35,18 @@ import { Notifs } from 'redux-notifications';
 </Provider>
 ```
 
+##### 4. Optionally import default CSS
+`redux-notifications` uses [react-css-transition-group](https://facebook.github.io/react/docs/animation.html#high-level-api-reactcsstransitiongroup) with the following classes:
+- .notif-transition-enter
+- .notif-transition-enter-active
+- .notif-transition-leave
+- .notif-transition-leave-active
+
+To import the default stylesheet:
+```js
+import { styles } from 'redux-notifications';
+```
+
 ## Sending notifications
 
 Thanks to Redux, sending notification is simply done by firing an `Action`:
@@ -58,10 +70,6 @@ class Demo extends React.Component {
 }
 ```
 
-## Demo
-
-[Watch the demo](http://indexiatech.github.io/re-notif) or [checkout its source code](https://github.com/indexiatech/re-notif/blob/master/demo/index.js)
-
 ## Actions
 
 #### `actions.notifSend({config})`
@@ -119,4 +127,4 @@ cd re-notif
 npm install
 npm run start
 ```
-Listening on localhost:3000
+Listening on localhost:9000

demo/demo.js

@@ -7,6 +7,7 @@ import {
   reducer as notifReducer,
   actions as notifActions,
   Notifs,
+  styles, // eslint-disable-line no-unused-vars
 } from 're-notif'; // eslint-disable-line import/no-unresolved
 const { notifSend, notifClear, notifDismiss } = notifActions;
 

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "cd demo && webpack-dev-server --config webpack.config.js --progress --colors --port 9000",
     "clean": "rimraf lib",
-    "build": "npm run clean && BABEL_ENV=production babel src --out-dir lib",
+    "build": "npm run clean && BABEL_ENV=production babel src --out-dir lib && cp src/styles.css lib/styles.css",
     "lint": "eslint src",
     "prepublish": "npm run lint && npm run build"
   },

src/components/Notifs.js

@@ -1,9 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import TransitionGroup from 'react-addons-css-transition-group';
-
-// These can be overridden by changing the componentClassName prop
-import '../../css/styles.css';
 import Notif from './Notif';
 
 // This checks to see if object is immutable and properly access it

src/index.js

@@ -1,9 +1,11 @@
-import reducer from './reducers/notifs';
-import * as actions from './actions/notifs';
+import reducer from './reducer';
+import * as actions from './actions';
 import Notifs from './components/Notifs';
+import styles from './styles.css';
 
 export {
   Notifs,
   actions,
   reducer,
+  styles,
 };

src/reducers/notifs.js → src/reducer.js

@@ -1,4 +1,4 @@
-import { NOTIF_SEND, NOTIF_DISMISS, NOTIF_CLEAR } from '../actions/notifs';
+import { NOTIF_SEND, NOTIF_DISMISS, NOTIF_CLEAR } from './actions';
 
 export default function notifs(domain = [], action) {
   if (!action || !action.type) return domain;