dowellchat

Chat App Component

This documentation provides an overview and usage guide for the React Chat App, a simple chat application developed using React. The app includes a chat button on the main page that, when clicked, opens a chat modal powered by the DowellChatBox component.

Installation

1. You can install DowellChat via npm or yarn:

   npm install dowellchat
   

   or

   yarn add dowellchat
   

2. Import the DowellChat component and useState hook in your React component:

   import DowellChat from "dowellchat";
   

USAGE

1. Define Custom Styles Define custom CSS styles for positioning the chat component within your application

   const styles = {
     customPositioning: {
       position: 'fixed',
       bottom: '1.25rem',
       left: '1.5rem',
       marginLeft: '0.75rem',
       zIndex: '50',
     },
   }
   

2. Create App Component Create a functional component (e.g., App) to manage the DowellChat component:

   function App() {
     const [message, setMessage] = useState(
       [{sender: "user", message: "Hello, I am a user", time: "12:00"}, 
       {sender: "bot", message: "Hello, I am a bot", time: "12:01"},
     ]); // Initialize with initial message state
   
     const changeMessage = (msg) => {
       setMessage([...message, msg]);
     };
   
     return (
       <>
         <DowellChat
           position={styles.customPositioning}
           message={message}
           changeMessage={changeMessage}
         />
       </>
     );
   }
   
   

Example

import { useState } from 'react';
import DowellChat from 'dowellchat';

const styles = {
  customPositioning: {
    position: 'fixed',
    bottom: '1.25rem',
    left: '1.5rem',
    marginLeft: '0.75rem',
    zIndex: '50',
  },
};

function App() {
  const [message, setMessage] = useState([]);

  const changeMessage = (msg) => {
    setMessage([...message, msg]);
  };

  return (
    <>
      <DowellChat
        position={styles.customPositioning}
        message={message}
        changeMessage={changeMessage}
      />
    </>
  );
}

export default App;