<Popup> Component

<Popup> is a generic element with dynamic visibility (show/hide) in popup fashion.

Here the demo:

Preview
Hurry up!

Installing <Popup> Component

There are 2 ways to install <Popup> component into your react app project:

  • Install the Specific Package of <Popup> Component
  • Install the Whole Reusable-UI Component Pack, including the <Popup> Component

expanded Property

Expands/Collapses the <Popup>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

<Popup expanded={true}> 

Hopla!

Show code

lazy Property

Determines whenever the <Popup>'s children should be rendered or not when the <Popup expanded={false}>.

The possible values are:

  • undefined
  • false
  • true

Floating Properties

Determines how the <Popup> should be floating on the target DOM reference.

floatingOn Property

Determines the target DOM reference where the <Popup> should be floating on.
If not set (undefined), the <Popup> becomes a normal element flow.

Here the preview:

Preview
Hurry up!
Hurry up!

Show code

floatingPlacement Property

Determines the location where the <Popup> should be floating on the target DOM reference.

Here the preview:

floatingPlacement='top'
Hurry up!

floatingStrategy Property

Determines the technical strategy how the <Popup> can float.
In most cases, you should not worry about the detail mechanism how the <Popup> can float.

The possible values are:

  • undefined
  • 'absolute'
  • 'fixed'

floatingAutoFlip Property

Automatically flips the floatingPlacement to opposite direction when the <Popup> is about to be clipped.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
Hurry up!

Show code

floatingAutoShift Property

Automatically shifts the floatingPlacement to nearest safe position when the <Popup> is about to be clipped.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
Hurry up!

Show code

floatingOffset Property

The distance (in pixel) between the <Popup> and the target DOM reference.

The possible values are:

  • undefined
  • 0
  • positive number
  • negative number

Here the preview:

Preview

<Popup floatingOffset={0}>

Hurry up!
Hurry up!

Show code

floatingShift Property

The distance (in pixel) between the <Popup> and the default floatingPlacement location.

The possible values are:

  • undefined
  • 0
  • positive number
  • negative number

Here the preview:

Preview

<Popup floatingShift={0}>

Hurry up!
Hurry up!

Show code

onFloatingUpdate Property

Sets a callback function to be called when the <Popup> updates the position relative to the target DOM reference.

The callback function parameters:

  • event: FloatingPosition

Variant Properties

The alternative appearances of the <Popup> layout without changing the <Popup>'s functionality.

size Property

Defines the alternative size of the <Popup>.

The possible values are:

  • undefined
  • 'sm'
  • 'md'
  • 'lg'

Here the preview:

Preview
A <Popup> with sm size
A <Popup> with md size
A <Popup> with lg size

Show code

theme Property

Defines the contextual theme of the <Popup>.

The possible values are:

  • undefined
  • 'primary'
  • 'secondary'
  • 'success'
  • 'info'
  • 'warning'
  • 'danger'
  • 'light'
  • 'dark'

Here the preview:

Preview
A <Popup> with primary theme
A <Popup> with secondary theme
A <Popup> with success theme
A <Popup> with info theme
A <Popup> with warning theme
A <Popup> with danger theme
A <Popup> with light theme
A <Popup> with dark theme

Show code

gradient Property

Activates a 3D mode of the <Popup>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
A <Popup> with gradient mode
A <Popup> with gradient mode
A <Popup> with gradient mode
A <Popup> with gradient mode
A <Popup> with gradient mode
A <Popup> with gradient mode
A <Popup> with gradient mode
A <Popup> with gradient mode

Show code

outlined Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <Popup>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
A <Popup> with outlined mode
A <Popup> with outlined mode
A <Popup> with outlined mode
A <Popup> with outlined mode
A <Popup> with outlined mode
A <Popup> with outlined mode
A <Popup> with outlined mode
A <Popup> with outlined mode

Show code

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Popup>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
A <Popup> without mild mode
A <Popup> without mild mode
A <Popup> without mild mode
A <Popup> without mild mode
A <Popup> without mild mode
A <Popup> without mild mode
A <Popup> without mild mode
A <Popup> without mild mode

Show code

nude Property

Activates an nude mode (background-less, padding-less, and border-less) of the <Popup>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
A <Popup> with nude mode
A <Popup> with nude mode
A <Popup> with nude mode
A <Popup> with nude mode
A <Popup> with nude mode
A <Popup> with nude mode
A <Popup> with nude mode
A <Popup> with nude mode

Show code

Variables

There are several variables of <Popup> you can customize. Changing the variables affects all <Popup> instance and other components that depend on <Popup>.

Here the exposed variables:

  • Animations

The example of accessing, modifying, & adding variables:

Show code