Skip to content

Commit

Permalink
Updated docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vidit-Kushwaha
Vidit-Kushwaha committed Jun 26, 2024
1 parent 7362760 commit 88cda35
Show file tree
Hide file tree
Showing 5 changed files with 149 additions and 32 deletions.
53 changes: 51 additions & 2 deletions docs/docs/installation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ sidebar_label: Installation

## Requirements

- [React](https://reactjs.org) version >= 18 or above
- [React](https://reactjs.org) version such that ReactDOM.createPortal is available

## With npm:

Expand All @@ -22,10 +22,12 @@ import "react-popupify/dist/bundle.css";

## Usage Example

### Using Popup

```jsx
import React, { useState } from 'react'
import { PopupContainer } from 'react-popupify'
import "react-popupify/dist/bundle.css";
import 'react-popupify/dist/bundle.css'

const ExampleComponent = () => {
const [isOpen, setIsOpen] = useState(false)
Expand Down Expand Up @@ -56,3 +58,50 @@ const ExampleComponent = () => {

export default ExampleComponent
```

### Using showPopup

```jsx
import React from 'react'

import { showPopup } from 'react-popupify'
import 'react-popupify/dist/bundle.css'
import CustomPopup from './component/CustomPopup'

const App = () => {
const popup = () => showPopup('customPopupId', { open: true })

return (
<div>
<button onClick={popup}>Show Popup!</button>
<CustomPopup />
</div>
)
}

export default App
```

./component/CustomPopup.tsx

```jsx
import React from 'react'
import { Popup } from 'react-popupify'

const CustomPopup = () => {
return (
<Popup
popupId="customPopupId"
animation="bounce"
open={false}
closeOnEscape={true}
closeOnOutsideClick={true}
closeButton={true}
>
Say Hello to React-Poupify !!
</Popup>
)
}

export default CustomPopup
```
44 changes: 17 additions & 27 deletions docs/docs/popup.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,49 +14,39 @@ The ` Popup` component is a higher-order React component designed to manage and

| Property | Type | Default | Description |
| --------------------- | --------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------ |
| `children` | `React.ReactNode` | N/A | The content to be displayed inside the popup. |
| `popupId` | `string` | N/A | Optional ID for the popup element. |
| `open` | `boolean` | `false` | Determines if the popup is open. |
| `onClose` | `() => void` | N/A | Callback function called when the popup is closed. |
| `autoClose` | `number \| false` | `false` | Time in milliseconds to automatically close the popup. If `false`, auto-close is disabled. |
| `closeOnOutsideClick` | `boolean` | `true` | Determines if the popup should close when clicking outside of it. |
| `closeOnEscape` | `boolean` | `true` | Determines if the popup should close when pressing the escape key. |
| `closeButton` | `boolean \| ((props: CloseButtonProps) => React.ReactNode) \| React.ReactElement<CloseButtonProps>` | `true` | Configures the close button. Can be a boolean, a render function, or a React element. |

### PopupProps

| Property | Type | Default | Description |
| ---------------- | ----------------- | ------- | --------------------------------------------- |
| `children` | `React.ReactNode` | N/A | The content to be displayed inside the popup. |
| `popupId` | `Id` | N/A | Optional ID for the popup element. |
| `animation` | `Animation` | N/A | Type of animation for the popup. |
| `duration` | `number` | N/A | Duration of the animation in milliseconds. |
| `popupClassName` | `string` | N/A | Additional class names for the popup element. |

### PopupPropsExtended

| Property | Type | Default | Description |
| -------------- | ---------------------------- | ------- | ---------------------------------------------------------- |
| `onClickClose` | `(isClose: boolean) => void` | N/A | Callback function called when the close button is clicked. |
| animation | `bounce`, `flip`, `zoom`, `fade` | `fade` | Animation type for the popup. Default is 'fade'. |
| `duration` | `number` | 300 | Duration of the animation in milliseconds. Default is `300`. |
| `popupClassName` | `string` | N/A | Additional class names for the popup element. |
| `backdropClassName` | `string` | N/A | Additional class name for the backdrop. |

## Usage Example

```jsx
import React, { useRef } from 'react';
import Popup from './Popup';
import React, { useRef } from 'react'
import Popup from './Popup'

const ExampleComponent = () => {
const popupRef = useRef(null);
const popupRef = useRef(null)

const openPopup = () => {
if (popupRef.current) {
popupRef.current.open();
popupRef.current.open()
}
};
}

const closePopup = () => {
if (popupRef.current) {
popupRef.current.close();
popupRef.current.close()
}
};
}

return (
<div>
Expand All @@ -71,14 +61,14 @@ const ExampleComponent = () => {
<div>Popup content goes here</div>
</Popup>
</div>
);
};

export default ExampleComponent;
)
}

export default ExampleComponent
```

## Notes

- The Popup component relies on DefaultConfig.CSS_NAMESPACE for generating the class names for styling. Ensure that the appropriate CSS styles are defined in your stylesheet.
- The Transition component is used to handle animations. Customize the animation types and durations as needed.
- The component uses custom hooks useOutsideClick and useEscapeKey to handle closing the popup via outside clicks and escape key presses, respectively.
77 changes: 77 additions & 0 deletions docs/docs/showPopup.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
---
id: showPopup
title: showPopup
sidebar_label: showPopup
---

The `showPopup` function is a utility for displaying a popup/modal in your application. It leverages the popupManager to manage the visibility and properties of popups.

## Import

```typescript
import { showPopup } from 'react-popupify'
```

## Syntax

```typescript
showPopup(popupId: string, options: ShowPopup): void
```

## Parameters

- `popupId`: string
The unique identifier for the popup. This ID is used to register and manage the popup within the popupManager.
- `options`: ShowPopup
An object containing various properties to customize the behavior and appearance of the popup. This object extends PopupProps and includes:

### Options

| Property | Type | Default | Description |
| --------------------- | --------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------ |
| `open` | `boolean` | `false` | Determines if the popup is open. |
| `onClose` | `() => void` | N/A | Callback function called when the popup is closed. |
| `autoClose` | `number \| false` | `false` | Time in milliseconds to automatically close the popup. If `false`, auto-close is disabled. |
| `closeOnOutsideClick` | `boolean` | `true` | Determines if the popup should close when clicking outside of it. |
| `closeOnEscape` | `boolean` | `true` | Determines if the popup should close when pressing the escape key. |
| `closeButton` | `boolean \| ((props: CloseButtonProps) => React.ReactNode) \| React.ReactElement<CloseButtonProps>` | `true` | Configures the close button. Can be a boolean, a render function, or a React element. |
| animation | `bounce`, `flip`, `zoom`, `fade` | `fade` | Animation type for the popup. Default is 'fade'. |
| `duration` | `number` | 300 | Duration of the animation in milliseconds. Default is `300`. |
| `popupClassName` | `string` | N/A | Additional class names for the popup element. |
| `backdropClassName` | `string` | N/A | Additional class name for the backdrop. |

### Returns

- void

## Usage Example

```jsx
import { showPopup } from 'react-popupify'
import CustomPopup from './components/CustomPopup'

const App = () => {
const handleShowPopup = () => {
showPopup('examplePopupId', {
open: 'true' // To emmit popup set open option to be true
animation: 'bounce',
duration: 500,
autoClose: 3000,
closeButton: true,
})
}
return (
<div>
<button onClick={handleShowPopup}>Show Popup</button>
<CustomPopup />
</div>
)
}

export default App
```

## Notes

- Ensure that the `popupId` provided matches the ID used when registering the popup component.
- The `showPopup` function utilizes the `popupManager` to manage the lifecycle and properties of the `popup`. Ensure popupManager is properly set up in your project.
4 changes: 2 additions & 2 deletions docs/docs/transition.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,5 +62,5 @@ export default ExampleComponent
## Notes
N/AThe component relies on DefaultConfig.CSS_NAMESPACE for generating the class names for animations. Ensure that the appropriate CSS classes are defined in your stylesheets.
N/AThe useLayoutEffect and useEffect hooks are used to handle the animations for entering and exiting the DOM respectively.
- The component relies on DefaultConfig.CSS_NAMESPACE for generating the class names for animations. Ensure that the appropriate CSS classes are defined in your stylesheets.
- The useLayoutEffect and useEffect hooks are used to handle the animations for entering and exiting the DOM respectively.
3 changes: 2 additions & 1 deletion docs/sidebars.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@ const sidebars: SidebarsConfig = {
"installation",
],
["API Reference"]: [
"popupContainer",
"popup",
"popupContainer",
"closeButton",
"transition",
"showPopup",
],

}
Expand Down

0 comments on commit 88cda35

Please sign in to comment.