Skip to main content

Popup

The Popup component is a versatile overlay designed to present temporary content or facilitate user interactions with customizable options.

Import​

Phaselis exports one main component for Popup.

import { Popup } from 'phaselis';
  • Popup: Main Component import for Popup

Usage​

Basic Popup​

Display a basic popup with a title and close action.

import { Button, Popup } from "phaselis";
import { useState } from "react";
import { Text } from "react-native";

const Example = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onClick={() => setVisible(true)} text="Open Popup" />
      <Popup
        show={visible}
        onClose={() => setVisible(false)}
        title="Popup Title"
      >
        <Text>This is the popup content</Text>
      </Popup>
    </>
  );
};

export default Example;

Props​

tip

Other than the listed props below, you can pass any prop that a Modal component accepts.

show​

boolean

If true, the popup is visible.

import { Button } from "phaselis";
import { useState } from "react";
const [visible, setVisible] = useState(false);
<Button onClick={() => setVisible(true)} />
<Popup show={visible} onClose={() => setVisible(false)}></Popup>

duration​

number

The duration of the show/hide animation in milliseconds. Defaults to 500.

import { Button } from "phaselis";
import { useState } from "react";
import { Text } from "react-native";
const [visible, setVisible] = useState(false);
<Button onClick={() => setVisible(true)} text="Open Popup" />
<Popup show={visible} onClose={() => setVisible(false)} duration={700}>
<Text>Phaselis</Text>
</Popup>

onClose​

() => void

Callback triggered when the popup is closed.

import { Button } from "phaselis";
import { useState } from "react";
import { Text } from "react-native";
const [visible, setVisible] = useState(false);
<Button onClick={() => setVisible(true)} text="Open Popup" />
<Popup
show={visible}
onClose={() => {
    console.log("Popup closed");
    setVisible(false);
}}
>
<Text>Phaselis</Text>
</Popup>

fullScreen​

boolean

If true, the popup takes the full screen. Defaults to false.

import { Button } from "phaselis";
import { useState } from "react";
import { Text } from "react-native";
const [visible, setVisible] = useState(false);
<Button onClick={() => setVisible(true)} text="Open Popup" />
<Popup show={visible} onClose={() => setVisible(false)} fullScreen>
<Text>Phaselis</Text>
</Popup>

backgroundBlur​

boolean

If true, it applies a blur effect to the background when the popup is displayed. Defaults to false.

import { Button } from "phaselis";
import { useState } from "react";
import { Text } from "react-native";
const [visible, setVisible] = useState(false);
<Button onClick={() => setVisible(true)} text="Open Popup" />
<Popup 
  show={visible} 
  onClose={() => setVisible(false)} 
  backgroundBlur
>
  <Text>This is the popup content with background blur effect</Text>
</Popup>

style​

object

An object to customize various parts of the popup's style. You can either provide an object with named styles or directly provide ViewStyle properties that will be applied to the element.

NameTypeDescription
titleTextStyleStyle for the popup title text
containerViewStyleStyle for the popup container
headerViewStyleStyle for the header section
elementViewStyleStyle for the main content element
leftSlotIconStyleStyle for the left icon/slot
closeIconIconStyleStyle for the close icon
backDropViewStyleStyle for the backdrop overlay
import { Button } from "phaselis";
import { useState } from "react";
import { Text } from "react-native";
const [visible, setVisible] = useState(false);
<Button onClick={() => setVisible(true)} text="Open Popup" />
<Popup
title="Phaselis"
show={visible}
onClose={() => setVisible(false)}
style={{
    container: { backgroundColor: "#fff" },
    title: { fontSize: 18, fontWeight: "bold" },
    element: { padding: 20, borderRadius: 10 }
  }}
>
  <Text>Phaselis</Text>
</Popup>

// Direct element styling
<Popup
  title="Phaselis"
  show={visible}
  onClose={() => setVisible(false)}
  style={{ padding: 24, backgroundColor: "#f8f9fa", borderRadius: 12 }}
>
  <Text>Popup with direct element styling</Text>
</Popup>

containerStyle​

ViewStyle

Additional style applied directly to the popup container.

<Popup
  show={visible}
  onClose={() => setVisible(false)}
  containerStyle={{ borderRadius: 20, backgroundColor: "#ffffff" }}
>
  <Text>Custom container styling</Text>
</Popup>

titleStyle​

TextStyle

Additional style applied directly to the title text.

<Popup
  title="Custom Title"
  show={visible}
  onClose={() => setVisible(false)}
  titleStyle={{ fontSize: 20, color: "#0066cc", fontWeight: "bold" }}
>
  <Text>Popup with custom title style</Text>
</Popup>

headerStyle​

ViewStyle

Additional style applied directly to the header section.

<Popup
  title="Header Styled"
  show={visible}
  onClose={() => setVisible(false)}
  headerStyle={{ borderBottomWidth: 1, borderBottomColor: "#eeeeee", paddingBottom: 10 }}
>
  <Text>Popup with custom header style</Text>
</Popup>

leftSlotStyle​

ViewStyle | IconStyle

Additional style applied directly to the left icon or slot.

<Popup
  title="With Icon"
  leftIcon="Info"
  show={visible}
  onClose={() => setVisible(false)}
  leftSlotStyle={{ color: "#0066cc" }}
>
  <Text>Popup with custom left icon style</Text>
</Popup>

closeIconStyle​

ViewStyle | IconStyle

Additional style applied directly to the close icon.

<Popup
  show={visible}
  onClose={() => setVisible(false)}
  closeIconStyle={{ color: "red" }}
>
  <Text>Popup with custom close icon</Text>
</Popup>

backDropStyle​

ViewStyle

Additional style applied directly to the backdrop.

<Popup
  show={visible}
  onClose={() => setVisible(false)}
  backDropStyle={{ backgroundColor: "rgba(0, 0, 0, 0.7)" }}
>
  <Text>Popup with custom backdrop</Text>
</Popup>

leftIcon​

SlotIconName

Specify an icon for the left slot in the header.

import { Button } from "phaselis";
import { useState } from "react";
import { Text } from "react-native";
const [visible, setVisible] = useState(false);
<Button onClick={() => setVisible(true)} />
<Popup
title="Phaselis"
leftIcon="Star"
show={visible}
onClose={() => setVisible(false)}
>
<Text>Phaselis</Text>
</Popup>

LeftSlot​

SlotChildComponent

Pass a custom component to the left slot of the header.

import { Button, LucideIcon } from "phaselis";
import { useState } from "react";
import { Text } from "react-native";
const [visible, setVisible] = useState(false);
<Button onClick={() => setVisible(true)} />
<Popup
    title="Phaselis"
    LeftSlot={() => <LucideIcon name="Star" />}
    show={visible}
    onClose={() => setVisible(false)}
>
    <Text>Phaselis</Text>
</Popup>

title​

string

Title text displayed in the popup header.

import { Button } from "phaselis";
import { useState } from "react";
import { Text } from "react-native";
const [visible, setVisible] = useState(false);
<Button onClick={() => setVisible(true)} />
<Popup title="Phaselis" show={visible} onClose={() => setVisible(false)}>
<Text>Phaselis</Text>
</Popup>

children​

ReactNode

Content to display inside the popup.

import { Button } from "phaselis";
import { useState } from "react";
import { Text } from "react-native";
const [visible, setVisible] = useState(false);
<Button onClick={() => setVisible(true)} text="Open Popup" />
<Popup show={visible} onClose={() => setVisible(false)}>
<Text>Phaselis</Text>
</Popup>

variation​

default | info | success | warning | error

Determines the style of the popup.

  • default: Applies the default popup style.
  • info: Applies an informational popup style.
  • success: Applies a success message popup style.
  • warning: Applies a warning message popup style.
  • error: Applies an error message popup style.
import { Button } from "phaselis";
import { useState } from "react";
import { Text } from "react-native";
const [visible, setVisible] = useState(false);
<Button onClick={() => setVisible(true)} text="Open Popup" />
<Popup show={visible} onClose={() => setVisible(false)} title="Popup Title" variation="success">
  <Text>This is the success popup content</Text>
</Popup>