Popovers

General

Popovers
The floating card pops up when clicking an element.

Show Code

  import React from "react";
  import Popovers from "pocko-ui/Popovers";
  
  return (
    <div className="mt-4">
      <Popovers
        ref={popoverRef}
        modalBodyHeight="" // 弹出框高度
        modalBodyWidth="" // 弹出框宽度
        content={
          <button className="btn btn-sm btn-primary text-dark" type="button">
            test
          </button>
        }
        triggerShow={true}
      >
        <h2>This is Popovers' content</h2>
      </Popovers>
    </div>
  );
);

Customize Height or Width

Show Code

import React from "react";
import Popovers from "pocko-ui/Popovers";
 
return (
  <div class="d-flex align-items-center gap-4">
    <Popovers
      modalBodyHeight="100" // 弹出框高度
      modalBodyWidth="100" // 弹出框宽度
      content={
        <button className="btn btn-sm btn-primary text-dark" type="button">
          100px
        </button>
      }
      triggerShow={true}
    >
      <h2>Width: 100px</h2>
      <h2>Height: 100px</h2>
    </Popovers>
 
    <Popovers
      modalBodyHeight="300" // 弹出框高度
      modalBodyWidth="300" // 弹出框宽度
      content={
        <button className="btn btn-sm btn-info" type="button">
          300px
        </button>
      }
      triggerShow={true}
    >
      <h2>Width: 300px</h2>
 
      <h2>Height: 300px</h2>
    </Popovers>
  </div>
);

API

Popovers

import Popovers from "pocko-ui/Popovers";
import 'pocko-ui/Popovers/index.css'

Property	Type	Default	Description	Required
children	ReactNode	-	The content to be displayed inside the popover. This can be any valid ReactNode (e.g., text, components, elements).	✔
modalBodyHeight	string	-	The height of the modal body (popover content area). This should be a string representing a valid CSS height value (e.g., '200px').	✔
modalBodyWidth	string	-	The width of the modal body (popover content area). This should be a string representing a valid CSS width value (e.g., '300px').	✔
content	string \| ReactNode	-	The initial content displayed as the trigger for the popover. It can be a string or a ReactNode (e.g., a button or text).	✔
triggerShow	Boolean	-	A boolean flag to control whether the popover should be toggled open or closed on click.	✔
externalClassName	any[]	-	An array of external class names to handle clicks outside the popover, ensuring that the popover is not closed when clicking on certain elements.	No
closeFunc	Function \| any	-	A callback function triggered when the popover is closed. This function is called in the `useEffect` when the popover is closed.	No

Installation