Divider

Source

Theme Source

The Divider component in Pearl UI is a versatile tool used to create a visual separation between different sections of content in a list or group. It can be customized in terms of orientation, color, size, and more.

Import#

import { Divider } from "pearl-ui";

Usage#

// Basic usage of Divider<Divider />
// Customizing Divider with orientation and color<Divider orientation="horizontal" bgColor="red" />
// Using Divider in a list<View>  <Text>Item 1</Text>  <Divider orientation="horizontal" />  <Text>Item 2</Text>  <Divider orientation="horizontal" />  <Text>Item 3</Text></View>

Changing Divider Orientation#

The Divider's orientation can be changed using the orientation prop. This allows you to set the direction of the divider as either horizontal or vertical.

<Divider orientation="horizontal" />
<Divider orientation="vertical" />

Overriding Default Styles#

The Divider component supports a variety of style props which can be used to override the pre-defined styles in the theme. Any manual style props passed into the component will take precedence over the default component configuration.

// Example: Overriding the default background color<Divider bgColor="red" />

Example#

Embed not loading? Click here

Component Properties#

Supported Style Properties#

The Divider component supports the following style props:

backgroundColor (Only backgroundColor props are supported, not the color prop)
layout
transform
position
opacity and visiblity
margin and padding

Animation Properties#

The Divider component inherits animation properties from the Box component, which are managed by the Moti library. This allows for the creation of dynamic and interactive UI elements. The useMotiWithStyleProps hook from the Moti library is utilized to manage these animation properties.

Property	Type	Default	Description
`from`	object		Defines the starting state of the animation.
`to`	object		Defines the ending state of the animation.
`transition`	object		Specifies the type of transition that the animation will use.
`exitTransition`	object		Determines the transition type that will be used when the component is unmounted. By default, `exit` uses `transition` to configure its animations, so this prop is not required. However, if you pass `exitTransition`, it will override `transition` for exit animations.
`state`	object		Manages the overall state of the animation, including the `from` and `to` states.
`delay`	number		Manage the delay for the `animate` field. (Use the `transition` prop for more granular control)
`onDidAnimate`	() => void		Callback function called after finishing an animation.
`stylePriority`	"state" \| "animate"	`"animate"`	This is not a prop you will likely find yourself using. If set to "animate", then styles passed from the `animate` prop will take precedent. Otherwise, if set to "state", then the `state` prop will take precedent for matching styles.
`animateInitialState`	boolean	`false`	If `true`, the `from` prop will be set to animate. This will be noticeable for some spring animations, and might make them jumpy on mount.

Additional Properties#

The Divider component also accepts the following additional props:

Name	Required	Type	Default	Description
`size`	false	PearlTheme.components.Divider["sizes"]		The size of the divider
`variant`	false	PearlTheme.components.Divider["variants"]		The variant of the divider
`thickness`	false	number	`1`	The thickness of the divider
`length`	false	number \| string	`"100%"`	The length of the divider
`orientation`	false	"horizontal" \| "vertical"	`"horizontal"`	The direction of the divider