docs(readme.md): doc added

documentation added for useOutsideClick

README.md

@@ -1,72 +1,69 @@
+# useOutsideClick
 
-# Triggered Suggestion
-
-This package provides a custom React hook, `useTriggeredSuggestion`, that attaches a div element to an input field and allows you to create an auto-suggestion feature that is triggered by a specific character entered in the input field.
-
-## Features
-- Attaches a div element to an input field and positions it directly below the input
-- Hides and shows the div element based on the input value
-- Allows you to specify a trigger character to trigger the auto-suggestion feature
-- Provides a search function to filter suggestions
-- Includes an onSelect callback function to handle selection of a suggestion
+A React hook for capturing outside click events. The `useOutsideClick` hook allows you to detect when a user clicks outside of a specific element on your website. It returns a reference to the element, which you can attach to a DOM node using the `ref` attribute, and a boolean indicating whether the user has clicked outside of the element.
 
 ## Installation
-``` npm install triggered-suggestion ```
 
+```bash
+npm install use-outside-click-hook
 
-## Usage
-```jsx
-import useTriggeredSuggestion from 'triggered-suggestion';
+```
 
-const suggestions = ['suggestion1', 'suggestion2', 'suggestion3'];
+## Usage
 
-const Example = () => {
-  const [inputRef, divRef, showDiv, position, filteredSuggestions, setSearchTerm] = useTriggeredSuggestion(suggestions, '@');
-  const [searchTerm, setSearchTermState] = useState('');
+```jsx
+import useOutsideClick from "use-outside-click-hook";
 
-  const handleSearch = (e) => {
-    setSearchTerm(e.target.value);
-  };
+function MyComponent() {
+  const [isOpen, setIsOpen] = useState(false);
+  const ref =
+    useOutsideClick < HTMLDivElement > (() => setIsOpen(false), isOpen);
 
-  const handleSelect = (suggestion) => {
-    setSearchTermState('');
-    setSearchTerm('');
-    console.log(`Selected: ${suggestion}`);
-  };
-
   return (
     <div>
-      <input ref={inputRef} value={searchTerm} onChange={handleSearch} />
-      {showDiv && (
-        <div ref={divRef} style={{ position: 'absolute', left: `${position.x}px`, top: `${position.y}px` }}>
-          {filteredSuggestions.map(suggestion => (
-            <div key={suggestion} onClick={() => handleSelect(suggestion)}>
-              {suggestion}
-            </div>
-          ))}
-        </div>
-      )}
+      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
+      {isOpen && <div ref={ref}>Click outside of this box to close</div>}
     </div>
   );
-};
+}
 ```
 
-## Props
-- `suggestions` (required): An array of suggestions to show
-- `onSelect` (required): A callback function that is called when a suggestion is selected. It will be called with the selected suggestion as the argument
-- `triggerCharacter` (optional): A string that specifies the trigger character to show suggestions. Default value is `@`
-- `divStyles` (optional): An object that contains the styles for the suggestion div
-- `inputStyles` (optional): An object that contains the styles for the input field
+## Parameters
 
+| Parameter | Type     | Description                                                                                |
+| --------- | -------- | ------------------------------------------------------------------------------------------ |
+| callback  | function | A function that will be called when a user clicks outside of the element.                  |
+| isOpen    | boolean  | (optional) A boolean variable that indicate whether the element should be open or closed.  |
+| return    | ref      | A ref that should be attached to the DOM element that you want to detect clicks outside of |
 
-## Future Work
-- Add ability to navigate through suggestions using arrow keys
-- Add ability to customize the appearance of the suggestion list
+Note that, the `isOpen` parameter is optional and you can use it to conditionally render the elements based on whether it's open or closed. If you don't pass this parameter, the hook will assume that the element is always open and will call the callback function whenever a click outside of the element occurs.
 
+Also, the `return` is the `ref` variable that should be attached to the DOM element that you want to detect clicks outside of, you can use this variable to attach to the DOM element using `ref` attribute.
 
-## Acknowledgements
-- Inspired by the auto-suggestion feature in Apple's Mail app
-- Built with [React](https://reactjs.org/)
+## Example
 
+```jsx
+import useOutsideClick from "use-outside-click-hook";
+
+function MyModal() {
+  const [isOpen, setIsOpen] = useState(false);
+  const ref =
+    useOutsideClick < HTMLDivElement > (() => setIsOpen(false), isOpen);
+
+  return (
+    <div>
+      <button onClick={() => setIsOpen(!isOpen)}>Open Modal</button>
+      {isOpen && (
+        <div className="modal" ref={ref}>
+          <div className="modal-content">
+            <p>Modal Content</p>
+            <button onClick={() => setIsOpen(false)}>Close</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+```
 
-Made with ❤ by [souvik](@souvik666)
+## Please note that, you should use this hook in a functional component.