fyndiq-component-message

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:

Name	Type	Description	Default value
type	String	Color scheme of the Message. One of info, confirm, warn or error.	info
icon	Icon	Icon from fyndiq-icons	null
children	Element	Text displayed inside the popup	null
timeout	Number	Time (in ms) until the message requests to be closed	5000
onClose	Function	Handler called when the message requests to be closed. Used internally by addMessage	() => {}