fyndiq-component-message v2.2.5

fyndiq-component-message

Preview

A Message component and utils for Fyndiq

Installation

The component can be installed through NPM:

npm i -S fyndiq-component-message

Usage

import React from 'react'
import { addMessage, Message, Wrapper } from 'fyndiq-component-message'

// First you need to render the <Wrapper /> somewhere on your app.
// It is recommended that you put it somewhere in the root of your app:
const MyApp = () => (
  <React.Fragment>
    <Wrapper />
    <Layout /> {/* Rest of your app*/}
  </React.Fragment>
)

// Next, you can use the utility `addMessage` to show
// a message. It will be automatically removed after 5 seconds
// if the user didn't interact with it.
addMessage(<Message>Content</Message>)

// Note that you can use this utility anywhere, not just in the
// render method of a component
class MyComponent extends React.Component {
  componentDidMount() {
    fetch('/my-api')
      .then(/* do something with the data*/)
      .catch(err => addMessage(
        <Message>Something bad happened</Message>
      ))
  }
}

// Customize the message
import { Error, Warning } from 'fyndiq-icons'
addMessage(
  <Message
    type="error"
    icon={<Error />}
  >
    There is something wrong here
  </Message>
)

API

The component Message has the following customizable props: