Feedbacky

Feedbacky is a fully customizable, lightweight (37 kB) Modal component which enables customers to give feedback about your e-commerce website.

Feedbacky is built using React & TypeScript and it has only one dependency which is clsx library

How it works?

Customers writes their feedback into a text box, clicks submit and that's it! By default feedbacks are saved into a Google Sheet via SheetDB API. But this default behaviour can be changed via providing a custom onSubmit prop to the Modal. See more below.

How to use?

First install the package by running:

npm install emirkucukosman-feedbacky

There are two ways to manage the modal:

1. Managing the Modal state by-yourself and rendering conditionally

import { useState } from "react";
import { Modal } from "emirkucukosman-feedbacky";

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <Modal.Trigger onClick={handleOpen} />
      {isOpen && <Modal onClose={handleClose} {...otherProps} />}
    </div>
  );
};

2. Using the ModalProvider and useModalContext hook

import {
  Modal,
  ModalProvider,
  useModalContext,
} from "emirkucukosman-feedbacky";

const Example = () => {
  const { openModal } = useModalContext();

  const handleOpen = () => {
    openModal({
      header: {
        title: "Modal Title",
      },
      ...otherProps,
    });
  };

  return (
    <div>
      <Modal.Trigger onClick={handleOpen}>Open Modal</Modal.Trigger>
    </div>
  );
};

const App = () => {
  return (
    <ModalProvider>
      <Example />
    </ModalProvider>
  );
};

Customization

Modal component has 4 sub-components as it's children which are Header, Body, Footer and Success. By default these components are used if you don't provide any custom children. If any children is provided inside Modal component than only those elements will be rendered

import { Modal } from "emirkucukosman-feedbacky";

<Modal />
// so this is actually rendered as:
<Modal>
  <Modal.Header />
  <Modal.Body />
  <Modal.Footer />
  <Modal.Success />
</Modal>
// note that Modal.Success is only rendered when submit is successful or showSuccess prop is true

Each of this child components can also be customizable by props like:

import { Modal } from "emirkucukosman-feedbacky";

<Modal
  header={{ title: 'Modal Title' }}
  body={{
    textAreaPlaceholder: 'Feedback placeholder...'
  }}
  ...otherProps
/>

It is also possible to both use the default components and your custom components ones like:

import { Modal } from "emirkucukosman-feedbacky";

<Modal>
  <Modal.Header />
  <Modal.Body />
  <Modal.Footer>
    <CustomFooter />
  </Modal.Footer>
  <Modal.Success />
</Modal>;

Props List

Modal Props

| Property | Description | Types | Required | | --------------------- | --------------------------------------------------------------------- | ------------ | -------- | | overlayClassName | classes to apply to overlay element | string | optional | | modalClassName | classes to apply to modal element | string | optional | | modalContentClassName | classes to apply to modal content element | string | optional | | formClassName | classes to apply to form element | string | optional | | header | header props | HeaderProps | optional | | body | body props | BodyProps | optional | | footer | footer props | FooterProps | optional | | success | success props | SuccessProps | optional | | children | children to render inside modal | ReactNode | optional | | sheetDbApiUrl | SheetDB API URL to save the feedback response | string | optional | | showSuccess | shows or hides the Modal.Success component | boolean | optional | | onSubmit | custom onSubmit function which will get called when submit is clicked | function | optional | | onClose | function which will be called when modal is closed | function | required |

Modal.Trigger Props

| Property | Description | Types | Required | | ------------------------- | ----------------------------------------------------- | --------- | -------- | | triggerContainerClassName | classes to apply to trigger container element | string | optional | | triggerButtonClassName | classes to apply to trigger button element | string | optional | | children | children to render inside trigger | ReactNode | optional | | onClick | function which will be called when trigger is clicked | function | optional |

Modal.Header Props

| Property | Description | Types | Required | | ----------------------- | --------------------------------------------------- | --------- | -------- | | title | title to be display on the modal | string | optional | | headerClassName | classes to apply to header element | string | optional | | titleClassName | classes to apply to title element | string | optional | | closeButtonRowClassName | classes to apply to close button row element | string | optional | | closeButtonClassName | classes to apply to close button element | string | optional | | children | children to render inside header | ReactNode | optional | | onClose | function which will be called when close is clicked | function | optional |

Modal.Body Props

| Property | Description | Types | Required | | -------------------- | ------------------------------------------------------ | --------- | -------- | | description | description to be display on the modal | string | optional | | bodyClassName | classes to apply to body element | string | optional | | descriptionClassName | classes to apply to description element | string | optional | | textAreaClassName | classes to apply to text area element | string | optional | | textAreaPlaceholder | placeholder to show on text area | string | optional | | textAreaRows | row count for text area | number | optional | | feedbackValue | string value for the feedback text area element | string | optional | | children | children to render inside body | ReactNode | optional | | onFeedbackChange | function which will be called when feedback is changed | function | optional |

Modal.Footer Props

| Property | Description | Types | Required | | --------------------- | ---------------------------------------------------- | --------- | -------- | | submitLabel | text to display inside submit button | string | optional | | submittingLabel | text to display inside submit button when submitting | string | optional | | isSubmitting | submit status of the button | boolean | optional | | submitButtonClassName | classes to apply to submit button element | string | optional | | footerClassName | classes to apply to footrr element | string | optional | | children | children to render inside footer | ReactNode | optional |

Modal.Success Props

| Property | Description | Types | Required | | ---------------- | ----------------------------------- | --------- | -------- | | message | text to display for success message | string | optional | | messageClassName | classes to apply to message element | string | optional | | children | children to render inside success | ReactNode | optional |