react-feedbacker v2.2.0

React Feedbacker

The library does not have opinions about styles, but instead gives you the functionality required to show the feedback messages.

Visit demo

Install

npm install react-feedbacker --save

Basic Usage

import { useFeedbackContainer, DelayWrapper, feedback } from 'react-feedbacker';

const App = () => (
  <div>
    <Feedbacker />

    <button onClick={() => feedback.success('Clicked button, you have')}>
      Give feedback
    </button>
  </div>
);

const Feedbacker = () => {
  const { items, closeItem, getDelayWrapperProps } = useFeedbackContainer({
    delayCloseMs: 400,
    closeAfterMs: 4000,
  });

  return (
    <div className="FeedbackContainer">
      {items.map((item) => (
        <DelayWrapper key={item.id} {...getDelayWrapperProps({ item })}>
          <div className="FeedbackItem">
            {item.message}

            <button
              type="button"
              className="FeedbackClose"
              onClick={() => closeItem(item)}
            >
              x
            </button>
          </div>
        </DelayWrapper>
      ))}
    </div>
  );
};

Container

The container could be used either as a hook or a function. The purpose is to expose the feedback props.

useFeedbackContainer

const MyComponent = () => {
  const options = { closeAfterMs: 4000 };
  const feedbackProps = useFeedbackContainer(options);
};

FeedbackContainer

<FeedbackContainer>{props => {...}}</FeedbackContainer>

<FeedbackContainer render={props => {...}} />

Feedback Container Options

Options for the container

Feedback Container Response

These are the returned values of either useFeedbackContainer or FeedbackContainer.

DelayWrapper

The DelayWrapper component is only required if you want to auto close items after an amount of time.

Input props

Note: these props can easily be sent to DelayWrapper component through getDelayWrapperProps provided by the Feedback Container.

<DelayWrapper {...getDelayWrapperProps({ item })}>

feedback

feedback is the way to add messages to the items returned by containers.

The default exported feedback has four methods, each setting the kind of the item:

• success
• warning
• error
• info

import { feedback } from 'react-feedbacker';

feedback.success('My message');
feedback.warning('My message');
feedback.error('My message');
feedback.info('My message');

You could optionally send a second attribute to a feedback with options.

import { feedback } from 'react-feedbacker';

feedback.success('Some special message', {
  closeAfterMs: 0,
  namespace: 'some-namespace',
});

createFeedback

If you want to add another feedback kind, change order when adding items or want to use multiple containers through namespaces, this is the way to go.

createFeedback is a curried function according to the following

(options: FeedbackOptions) => (kind: string) => (message: ReactNode);

// We can create our own notify function by
// calling createFeedback with the options first.
const notify = createFeedback({
  namespace: 'my-namespace',
  behavior: 'prepend',
});

// In this case, we create an object with happy and sad
export const mySpecialFeedback = {
  happy: notify('success'), // kind == 'success'
  sad: notify('sad'), // kind == 'sad'
};

// Then you can use the object to show different kind of messages
mySpecialFeedback.happy('My message');

FeedbackOptions

FeedbackItem

Each item returned from the containers.

Portal

Rendering the container through a portal will allow you to mount the items outside of the current mount node and into another, existing node. See the portal example or read more about portals in the react docs.

Development setup

# Installing dependencies
yarn install

# Starting the watch mode (outputs to dist)
yarn start

Build

# Make production build
yarn build

Tests

# Run tests
yarn test

License

This project is licensed under the terms of the MIT license.