Inplace API

API documentation for Inplace component

InplaceRoot#

Props#

Defines valid properties in Inplace 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?: InplaceRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: InplaceRootInstance) => 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<InplaceRootPassThrough>	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: InplaceRootInstance) => ReactNode)	null	The children to render.
disabled	boolean	false	When present, it specifies that the element should be disabled.
onActiveChange	(event: InplaceRootChangeEvent) => void	null	Callback fired when the Inplace's active state changes.
active	boolean	false	Whether the content is displayed or not.
defaultActive	boolean	false	Whether the content is displayed or not.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Inplace component.

name	type	default	description
active	boolean	null	The active state of the useInplace.

Exposes#

Defines the methods and properties exposed by Inplace component.

name	type	default	description
state	useInplaceState	null	The state of the useInplace.
open	() => void	null	Method to open the inplace.
close	() => void	null	Method to close the inplace.
onDisplayKeyDown	(event: KeyboardEvent<HTMLDivElement>) => void	null	Keydown event handler for the display.

Events#

InplaceRootChangeEvent

Event fired when the Inplace's checked state changes.

name	type	description
value	unknown	Value of the Inplace.
active	boolean	The active state of the inplace.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Inplace component.

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

Types#

Instance

Instance of Inplace component.

values
ComponentInstance<InplaceRootProps, InplaceRootState, InplaceRootExposes>

InplaceDisplay#

Props#

Defines valid properties in InplaceDisplay 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?: InplaceDisplayInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: InplaceDisplayInstance) => 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<InplaceDisplayPassThrough>	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: InplaceDisplayInstance) => 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 InplaceDisplay component.

name	type	default	description
inplace	InplaceRootInstance	null	The Inplace component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of InplaceDisplay component.

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

Types#

Instance

Instance of InplaceDisplay component.

values
ComponentInstance<InplaceDisplayProps, InplaceDisplayState, InplaceDisplayExposes>

InplaceContent#

Props#

Defines valid properties in InplaceContent 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?: InplaceContentInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: InplaceContentInstance) => 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<InplaceContentPassThrough>	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: InplaceContentInstance) => 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 InplaceContent component.

name	type	default	description
inplace	InplaceRootInstance	null	The Inplace component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of InplaceContent component.

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

Types#

Instance

Instance of InplaceContent component.

values
ComponentInstance<InplaceContentProps, InplaceContentState, InplaceContentExposes>

useInplace#

Props#

Defines valid properties in useInplace.

name	type	default	description
active	boolean	false	Whether the content is displayed or not.
defaultActive	boolean	false	Whether the content is displayed or not.
onActiveChange	(event: useInplaceChangeEvent) => void	null	Callback function that is called when the element is clicked.

State#

Defines valid state in useInplace.

name	type	default	description
active	boolean	null	The active state of the useInplace.

Exposes#

Defines the methods and properties exposed by useInplace.

name	type	default	description
state	useInplaceState	null	The state of the useInplace.
open	() => void	null	Method to open the inplace.
close	() => void	null	Method to close the inplace.
onDisplayKeyDown	(event: KeyboardEvent<HTMLDivElement>) => void	null	Keydown event handler for the display.

Events#

useInplaceChangeEvent

Event fired when the checkbox's checked state changes.

name	type	description
active	boolean	The active state of the inplace.

Types#

Instance

Instance of useInplace headless.

values
HeadlessInstance<useInplaceProps, useInplaceState, useInplaceExposes>