diff --git a/docs/docs/installation.md b/docs/docs/installation.md index 1f959da..82244c4 100644 --- a/docs/docs/installation.md +++ b/docs/docs/installation.md @@ -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: @@ -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) @@ -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 ( +
+ + +
+ ) +} + +export default App +``` + +./component/CustomPopup.tsx + +```jsx +import React from 'react' +import { Popup } from 'react-popupify' + +const CustomPopup = () => { + return ( + + Say Hello to React-Poupify !! + + ) +} + +export default CustomPopup +``` diff --git a/docs/docs/popup.md b/docs/docs/popup.md index a6d354d..80d215a 100644 --- a/docs/docs/popup.md +++ b/docs/docs/popup.md @@ -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` | `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 (
@@ -71,14 +61,14 @@ const ExampleComponent = () => {
Popup content goes here
- ); -}; - -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. diff --git a/docs/docs/showPopup.md b/docs/docs/showPopup.md new file mode 100644 index 0000000..67db821 --- /dev/null +++ b/docs/docs/showPopup.md @@ -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` | `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 ( +
+ + +
+ ) +} + +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. diff --git a/docs/docs/transition.md b/docs/docs/transition.md index fd2e90e..50f5102 100644 --- a/docs/docs/transition.md +++ b/docs/docs/transition.md @@ -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. diff --git a/docs/sidebars.ts b/docs/sidebars.ts index 217b39a..8be13bf 100644 --- a/docs/sidebars.ts +++ b/docs/sidebars.ts @@ -8,10 +8,11 @@ const sidebars: SidebarsConfig = { "installation", ], ["API Reference"]: [ - "popupContainer", "popup", + "popupContainer", "closeButton", "transition", + "showPopup", ], }