@anteniyus/message-bar v1.0.0

@anteniyus/message-bar

Simple Material-UI whole Project Snackbar

Install

npm install --save @anteniyus/message-bar

Usage

First create redux store and import snackbarReducer in your index.js file:

import { createStore, applyMiddleware } from 'redux';
import snackbarReducer from './components/Snackbar/SnackbarReducer';

const store = createStore(snackbarReducer, applyMiddleware(thunk));

> Then wrap your return statement with Provider and add Snackbar component:
```jsx
import { createStore, applyMiddleware } from 'redux';
import snackbarReducer from './components/Snackbar/SnackbarReducer';
import { Provider } from 'react-redux'; /* Add this */

const store = createStore(snackbarReducer, applyMiddleware(thunk));

export const ExampleComponent = () => {
  return (
    <Provider store={store}> {/* Add this */}
      <Snackbar /> {/* Add this */}
      ... //Other stuff
    </Provider> /* Add this */
  )
}

After that in any other components you want to show a message using snackbar you must wrap your component with SnackbarWrapper, and use this.props.showSnackbar('your message', variant) to show message to user, also variant is one of 'error', 'info', 'success', 'warning'.

import React, { Component } from 'react';
import SnackbarWrapper from './components/Snackbar/SnackbarWrapper';

class General extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <button
        onClick={() => {
          this.props.showSnackbar('This is a sample message', 'error');
        }}
      >
        Click me to show a message bar
      </button>
    );
  }
}

export default SnackbarWrapper(General)

import React, { Component } from 'react'

import General from './General'

class Example extends Component {
  render() {
    return <General />
  }
}

License

MIT © Reza