CodeCraft Kit

@codecraftkit

Documentation

Popover

Description#

Popover is a non-modal dialog that floats around a trigger. It is used to display contextual information to the user, and should be paired with a clickable trigger element.

This component is based on Popover

Import#

it can be imported from the core.

Code Example

import { Popover  } from "@codecraftkit/core";

or alone.

Code Example

import Popover  from "@codecraftkit/popover";

Usage#

A simple popover box with a text

Code Example

<Popover
  label="Open Popover"
  title='Hello World'
  body="Good Morning, I am a Popover"
  footer="I am the footer"
/>

Focus an element when Popover opens

Code Example

function MyApp() {
const initialFocusRef = React.useRef()

return <Popover
  initialFocusRef={initialFocusRef}
  placement="bottom"
  closeOnBlur={false}
  label="Open Popover"
  title="Helloooo"
  body="Popover Boy"
  footer={<ButtonGroup size="sm">
    <Button
      colorScheme="green"
    >
      Setup Email
    </Button>
    <Button
      colorScheme="blue"
      ref={initialFocusRef}
     >
      Next
    </Button>
  </ButtonGroup>}
 />
}

Props#

name

type

required

default

description

label

String

yes

The button label

body

StringReact Component

The content of the popover

children

React Component

The content of the popover, but you can use the children prop

variant

solidlinkoutlineghostunstyled

solid

Button style variant

title

String

yes

The Title section

footer

String

yes

The Footer section

trigger

ReactComponent

Custom Trigger Component

closeButton

Boolean

true

Show close Button

hasArrow

Boolean

true

Show arrow

width

styles<object>

Modify the popover content width

styles

styles<object>

Apply custom styles for the button

popoverContent

styles<object>

Apply custom styles for the popover content

popoverHeader

styles<object>

Apply custom styles for the popover header

popoverBody

styles<object>

Apply custom styles for the popover body

popoverFooter

styles<object>

Apply custom styles for the popover footer

popoverTrigger

styles<object>

Apply custom styles for the popover trigger

...rest

props

Other Props That received the Popover ComponentChakra ui Popover