Introduction

• feedbacky-button has the ruquire functions to send a feedback.
• Before you start to implement feedbacky-button you need to sign up to Feedbacky
• After you created your first application you will need the secret in the detail of the application if you don't set it as public.

Installation

Install the package

npm install --save @reactivers/feedbacky-button
yarn add @reactivers/feedbacky-button

CSS

import "@reactivers/feedbacky-button/dist/index.css";

Tailwind Config

• feedbacky-button uses tailwind. So, you need to edit your tailwind.config.js to have the default styles.

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@reactivers/feedbacky-button/dist/*.{js,css}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Simple Usage

FeedbackProvider

• You need to pass your feedback endpoint to url parameter.
• You can pass the username if you have a signed in user.
• If you set up your on the Feedbacky Panel as public you can set the url https://feedbacky.appysode.com/api/feedback/create?id=${APP_ID}

<FeedbackProvider
  url={"https://my.backend.com/api/feedback/create"}
  username="myuser"
>
  ...
</FeedbackProvider>

interface IFeedbackProvider {
  url: string;
  username?: string;
}

Feedback

• Feedback is the default flow.
• You can just add the following code to start quickly!
• You need to add it inside of the FeedbackProvider

<Feedback
  feedbackButtonProps={{
    classNames: "fixed right-6 bottom-20",
  }}
/>

interface IFeedback {
  feedbackButtonProps?: IFeedbackButtonProps;
  feedbackModalProps?: IFeedbackModalProps;
}

declare type IFeedbackButtonProps = Omit<IFeedbackButton, "onClick"> | {};
declare type IFeedbackModalProps = IFeedbackModal | {};

interface IFeedbackButton {
  classNames?: string;
  onClick: () => void;
  icon?: JSX.Element;
}

interface IFeedbackModal {
  title?: string;
  sendButtonTitle?: string;
  onSend?: (value: string) => void;
}

Advanced Usage

FeedbackCore

• You can customize Feedback with your components.

<FeedbackCore
  feedbackButton={YourFeedbackButton}
  feedbackModal={YourFeedbackModal}
  feedbackButtonProps={yourFeedbackButtonProps}
  feedbackModalProps={yourFeedbackModalProps}
/>

declare type IFeedbackButtonProps = Omit<IFeedbackButton, "onClick"> | {};
declare type IFeedbackModalProps = IFeedbackModal | {};

interface IFeedbackCore {
  feedbackButton: FC<IFeedbackButton>;
  feedbackButtonProps?: IFeedbackButtonProps;
  feedbackModal: FC<IFeedbackModal>;
  feedbackModalProps?: IFeedbackModalProps;
}

interface IFeedbackButton {
  classNames?: string;
  onClick: () => void;
  icon?: JSX.Element;
}

interface IFeedbackModal {
  title?: string;
  sendButtonTitle?: string;
  onSend?: (value: string) => void;
}

Custom Feedback Button

• You can create your custom button and pass it to FeedbackCore.
• It gets its props from FeedbackCore.
• onClick must be passed!

const MyFeedbackButton: FC<IFeedbackButton> = ({
  classNames,
  icon,
  onClick,
}) => {
  return (
    <div className={`${classNames}`} onClick={onClick}>
      {icon}
    </div>
  );
};

interface IFeedbackButton {
  classNames?: string;
  onClick: () => void;
  icon?: JSX.Element;
}

Custom Feedback Modal

• You can create your custom modal and pass it to FeedbackCore.

const FeedbackModal: FC<IFeedbackModal> = ({
  sendButtonTitle,
  title,
  onSend,
}) => {
  const { closeModal } = useFeedbackModal();
  const { sendFeedback } = useFeedback();
  const [value, setValue] = useState("");

  const onChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
    setValue(e.target.value);
  };

  const onSendClick = async () => {
    const { success } = await sendFeedback({
      feedback: value,
    });
    if (success) {
      if (!!onSend) onSend(value);
      setValue("");
      setShowSuccessFeedback(true);
    }
  };

  return (
    <div className="w-[320px] sm:w-[600px] min-h-[200px] w-full bg-white rounded-lg p-4">
      <div className="flex items-start justify-between w-full">
        <div></div>
        <div className="mt-3 text-xl cursor-pointer" onClick={closeModal}>
          <AiOutlineClose />
        </div>
      </div>
      <h1>{title}</h1>
      <input value={value} onChange={onChange} />
      <button onClick={onSendClick}>{sendButtonTitle}</button>
    </div>
  );
};

useFeedback

• If you want to trigger the sendFeedback function manually you can call it with the useFeedback hook.
• You need to use it in a component that is inside the FeedbackProvider

interface IFeedbackContext {
  sendFeedback: (params: IFeedbackParams) => Promise<IResponse>;
}

interface IResponse {
  success: boolean;
  result: any;
}

interface IFeedbackParams {
  feedback: string;
}

useModal

• If you want to control the FeedbackModal manually you can call the useModal hook.
• You need to use it in the component that is passed to the FeedbackCore component.
• It uses the context of FeedbackModalContainerProvider

interface IFeedbackModal {
  title?: string;
  sendButtonTitle?: string;
  onSend?: (value: string) => void;
  show: boolean;
  onClose: () => void;
}

interface IFeedbackModalContainerContext {
  onClose: () => void;
}

interface IFeedbackModalContainerContextProps {
  onClose: () => void;
}