Feedbacky

Feedbacky is simple and easy-to-use JS library for the take users feedback and save them into Google Sheet File.

Installation

To install the stable version:

Using npm as your package manager.

npm install feedbacky-ecemgul

Using yarn as your package manager.

yarn add feedbacky-ecemgul

Usage

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import { AppFeedback } from 'feedbacky-ecemgul';
import SheetIdForm from './SheetIdForm'; 

const App: React.FC = () => {
  const [sheetId, setSheetId] = useState<string>();
  const handleSubmitSheetId = (sheetId: string) => {
    setSheetId(sheetId);
  };

  return (
    <React.StrictMode>
      <div>
        <h3>Please provide sheet id</h3>
        <SheetIdForm onSubmit={handleSubmitSheetId} />
      </div>
      <hr />
      {sheetId &&       
      <div>
        <h1>Feedback Component</h1>
        <AppFeedback sheetID={sheetId} />
      </div>
}
    </React.StrictMode>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(<App />);

Props

sheetID - give the google spreadsheets id to AppFeedback component. With this id, it is determined which sheet the component will send the feedback it receives from the user.

sheetID | string

How to use with google spread sheet

Please create a goodle spread sheet and add feedback column to it.

Then, you should give edit permission to "feedbacky-customer-feedback@theta-citron-405612.iam.gserviceaccount.com" mail address.

Then, you should provide your sheet id to "AppFeedback" component.

Now, you can receive feedback from the users and save it to the your google spread sheet.

Backend Project Usage

npm install

node index.js

Online Demo Usage

npm install

yarn start

Deployment Links https://table-backend-66d5c7c9614a.herokuapp.com/api/feedback -backend deployment https://feedbacky-table-webapp.netlify.app/ -deployment for online demo of the package