emirkucukosman-feedbacky v1.0.6

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

Modal.Trigger Props

Modal.Header Props

Modal.Body Props

Modal.Footer Props

Modal.Success Props