Timeline API

API documentation for Timeline component

TimelineRoot#

Props#

Defines valid properties in Timeline component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: TimelineRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: TimelineRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<TimelineRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: TimelineRootInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Timeline component.

name	type	default	description
root	TimelineRootPassThroughType<InputHTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
event	TimelineRootPassThroughType<InputHTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the event's DOM element.
content	TimelineRootPassThroughType<InputHTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the content's DOM element.
opposite	TimelineRootPassThroughType<InputHTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the opposite's DOM element.
separator	TimelineRootPassThroughType<InputHTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the separator's DOM element.
marker	TimelineRootPassThroughType<InputHTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the marker's DOM element.
connector	TimelineRootPassThroughType<InputHTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the connector's DOM element.

Types#

Instance

Instance of Timeline component.

values
ComponentInstance<TimelineRootProps, TimelineRootState, TimelineRootExposes>

TimelineEvent#

Props#

Defines valid properties in TimelineEvent component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: TimelineEventInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: TimelineEventInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<TimelineEventPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: TimelineEventInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by TimelineEvent component.

name	type	default	description
timeline	TimelineRootInstance	null	The Timeline component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TimelineEvent component.

name	type	default	description
root	TimelineEventPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of TimelineEvent component.

values
ComponentInstance<TimelineEventProps, TimelineEventState, TimelineEventExposes>

TimelineContent#

Props#

Defines valid properties in TimelineContent component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: TimelineContentInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: TimelineContentInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<TimelineContentPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: TimelineContentInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by TimelineContent component.

name	type	default	description
timeline	TimelineRootInstance	null	The Timeline component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TimelineContent component.

name	type	default	description
root	TimelineContentPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of TimelineContent component.

values
ComponentInstance<TimelineContentProps, TimelineContentState, TimelineContentExposes>

TimelineOpposite#

Props#

Defines valid properties in TimelineOpposite component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: TimelineOppositeInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: TimelineOppositeInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<TimelineOppositePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: TimelineOppositeInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by TimelineOpposite component.

name	type	default	description
timeline	TimelineRootInstance	null	The Timeline component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TimelineOpposite component.

name	type	default	description
root	TimelineOppositePassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of TimelineOpposite component.

values
ComponentInstance<TimelineOppositeProps, TimelineOppositeState, TimelineOppositeExposes>

TimelineSeparator#

Props#

Defines valid properties in TimelineSeparator component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: TimelineSeparatorInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: TimelineSeparatorInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<TimelineSeparatorPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: TimelineSeparatorInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by TimelineSeparator component.

name	type	default	description
timeline	TimelineRootInstance	null	The Timeline component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TimelineSeparator component.

name	type	default	description
root	TimelineSeparatorPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of TimelineSeparator component.

values
ComponentInstance<TimelineSeparatorProps, TimelineSeparatorState, TimelineSeparatorExposes>

TimelineMarker#

Props#

Defines valid properties in TimelineMarker component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: TimelineMarkerInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: TimelineMarkerInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<TimelineMarkerPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: TimelineMarkerInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by TimelineMarker component.

name	type	default	description
timeline	TimelineRootInstance	null	The Timeline component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TimelineMarker component.

name	type	default	description
root	TimelineMarkerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of TimelineMarker component.

values
ComponentInstance<TimelineMarkerProps, TimelineMarkerState, TimelineMarkerExposes>

TimelineConnector#

Props#

Defines valid properties in TimelineConnector component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: TimelineConnectorInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: TimelineConnectorInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<TimelineConnectorPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: TimelineConnectorInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by TimelineConnector component.

name	type	default	description
timeline	TimelineRootInstance	null	The Timeline component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TimelineConnector component.

name	type	default	description
root	TimelineConnectorPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of TimelineConnector component.

values
ComponentInstance<TimelineConnectorProps, TimelineConnectorState, TimelineConnectorExposes>

useTimeline#

Types#

Instance

Instance of useTimeline headless.

values
HeadlessInstance<useTimelineProps, useTimelineState, useTimelineExposes>