xync v0.1.0

Xync

React, component for displaying notifications. Uses plain React component or connected to redux store.

• React component
  • styles
• Redux connected React component
  • createReducer
  • custom reducer

React Component

import { Notifications } from 'xync';

Notifications:

Notification: prop | type | desscription | -|-|-| id | string | unique id to identify notification | message | string | text content | mood | string | mood value will be appended to CSS class xync-bubble--{mood}

Wrap Notifications inside component which holds state and pass notifications as props;

import { render } from 'react-dom';
import { Notifications } from 'xync';

class NotificationContainer extends React.Component {
  constructor() {
    this.state = {
      notifications: {}
    };
  }

  removeNotification(id) {
    this.setState({
      notifications: this.state.notifications.filter(n => n.id !== id);
    });
  }

  render() {
    return (
      <Notifications
        notifications={this.state.notifications}
        onNotificationClick={this.removeNotification}
      />
    );
  }
}

render(<NotificationContainer />, document.body);

Styles

Load styles:

import 'xync/dist/Notifications/Notifications.css';

To style bubbles pass mood prop and add corresponding CSS class (xync-bubble--{mood})in stylesheet.

Redux connected React component

import { NotificationsConnect, createReducer } from 'xync';
import { combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { render } from 'react-dom';

const rootReducer = combineReducers({
  modal: createReducer()
});
const store = createStore(rootReducer, {});

render(
  (
    <Provider store={store}>
      <NotificationsConnect />
    </Provider>
  ),
  document.body);

Custom reducer

createReducer([customReducer])

Pass custom reducer function which let you change state on custom actions. You are free to change state as you need, however only addNotification, removeNotification helper reducers are recommended to not malform state

import { createReducer, openModal, closeModal } from 'modalo';
const customReducer = (state, action) => {
  switch (action.type) {
    case 'USER_NEEDS_TO_CONFIRM_ACTION': {
      return openModal(state, 'confirm-modal');
    }
    case 'USER_CONFIRMED': {
      return closeModal(state);
    }
    defautl: {
      return state;
    }
  }
};
const reducer = createReducer(customReducer);

TODO:

• add simple renderer (without animations)