updated docs

Author: Vidit-Kushwaha

docs/docs/installation.md

@@ -40,7 +40,7 @@ const ExampleComponent = () => {
       <button className="w-full mx-auto" onClick={() => setIsOpen(!isOpen)}>
         Open Popup
       </button>
-      <PopupContainer
+      <Popup
         animation="bounce"
         open={isOpen}
         closeOnEscape={true}
@@ -49,7 +49,7 @@ const ExampleComponent = () => {
         onClose={onClose}
       >
         Say Hello to React-Poupify !!
-      </PopupContainer>
+      </Popup>
     </div>
   )
 }

docs/docs/popup.md

@@ -6,7 +6,7 @@ sidebar_label: Popup
 
 ## Overview
 
-The `Popup` component is a versatile React component designed to display popup windows with customizable options for animations, auto-close behavior, and various close mechanisms. It supports nested children and can be controlled programmatically via a ref.
+The ` Popup` component is a higher-order React component designed to manage and display popup windows. It extends the `PopupContainer` component functionality by providing a container that handles rendering within a specified DOM element (defaulting to a `div` with the ID `popup-root`). This component offers additional customization for backdrops and integrates various popup properties for a seamless user experience.
 
 ## Props
 

docs/docs/popupContainer.md

@@ -6,7 +6,7 @@ sidebar_label: PopupContainer
 
 ## Overview
 
-The `PopupContainer` component is a higher-order React component designed to manage and display popup windows. It extends the `Popup` component functionality by providing a container that handles rendering within a specified DOM element (defaulting to a `div` with the ID `popup-root`). This component offers additional customization for backdrops and integrates various popup properties for a seamless user experience.
+The `PopupContainer` component is a versatile React component designed to display popup windows with customizable options for animations, auto-close behavior, and various close mechanisms. It supports nested children and can be controlled programmatically via a ref.
 
 ## Props
 
@@ -27,60 +27,6 @@ The `PopupContainer` component is a higher-order React component designed to man
 | `duration`            | `number`                                                                                            | `300`    | Duration of the animation in milliseconds.                                                 |
 | `popupClassName`      | `string`                                                                                            | N/A      | Additional class names for the popup element.                                              |
 
-### Default Props
-
-The `PopupContainer` component merges these default properties with the user-provided props:
-
-```typescript
-const defaultProps: defualtProps = {
-  autoClose: false,
-  closeOnOutsideClick: true,
-  closeOnEscape: true,
-  animation: 'fade',
-  duration: 300,
-  closeButton: true,
-}
-```
-
-## Usage Example
-
-```jsx
-import React, { useRef } from 'react'
-import PopupContainer from './PopupContainer'
-
-const ExampleComponent = () => {
-  const popupContainerRef = useRef(null)
-
-  const openPopup = () => {
-    if (popupContainerRef.current) {
-      popupContainerRef.current.open()
-    }
-  }
-
-  const closePopup = () => {
-    if (popupContainerRef.current) {
-      popupContainerRef.current.close()
-    }
-  }
-
-  return (
-    <div>
-      <button onClick={openPopup}>Open Popup</button>
-      <PopupContainer
-        ref={popupContainerRef}
-        open={false}
-        animation="fade"
-        duration={300}
-        onClose={() => console.log('Popup closed')}
-      >
-        <div>Popup content goes here</div>
-      </PopupContainer>
-    </div>
-  )
-}
-
-export default ExampleComponent
-```
 
 ## Notes
 

docs/docs/transition.md

@@ -22,14 +22,15 @@ Defines the Type of animations that can be applied.
 
 Defines the properties that can be passed to the Transition component.
 
-|  Property   |       Type        | Default | Description                                                                                         |
-| :---------: | :---------------: | ------: | --------------------------------------------------------------------------------------------------- |
-| `animation` |    `Animation`    |     N/A | The type of animation to be applied. Must be one of `bounce`, `flip`, `zoom`, or `fade`.            |
-| `duration`  |     `number`      |     300 | The duration of the animation in milliseconds.                                                      |
-| `children`  | `React.ReactNode` |     N/A | The child elements that will be wrapped by the Transition component and subjected to the animation. |
-|    `in`     |     `boolean`     |     N/A | A flag to determine if the component should be in the "entered" state.                              |
-| `onEntered` |   `() => void`    |     N/A | A callback function that is called when the enter animation has completed.                          |
-| `onExited`  |   `() => void`    |     N/A | A callback function that is called when the exit animation has completed.                           |
+|  Property   |               Type                | Default | Description                                                                                         |
+| :---------: | :-------------------------------: | ------: | --------------------------------------------------------------------------------------------------- |
+| `animation` |            `Animation`            |     N/A | The type of animation to be applied. Must be one of `bounce`, `flip`, `zoom`, or `fade`.            |
+| `duration`  |             `number`              |     300 | The duration of the animation in milliseconds.                                                      |
+| `children`  |         `React.ReactNode`         |     N/A | The child elements that will be wrapped by the Transition component and subjected to the animation. |
+|    `in`     |             `boolean`             |     N/A | A flag to determine if the component should be in the "entered" state.                              |
+| `onEntered` |           `() => void`            |     N/A | A callback function that is called when the enter animation has completed.                          |
+| `onExited`  |           `() => void`            |     N/A | A callback function that is called when the exit animation has completed.                           |
+|  `nodeRef`  | `React.RefObject<HTMLDivElement>` |     N/A | Ref to child component                                                                              |
 
 ## Usage Example