Function: useAutoheight

▸ useAutoheight<S>(params: AutoheightParams<S>): AutoheightState<S>

This hook will provide props to inject in a shell component to implement an "autoheight" behavior. It requires HandleHTMLDimensionsFeature to have be instantiated in the shell. Also recommend (see remarks):

• ForceElementSizeFeature,
• ForceResponsiveViewportFeature.

remarks This hook has caveats you must understand:

• Because the viewport height is now bound to the content heigh, you cannot and must not have an element which height depends on viewport, such as when using vh unit or height: 100%; on body. That will either create an infinite loop, or a zero-height page (this happens for Wikipedia). Hence, it is strongly advised that you use autoheight only with content you have been able to test. This can be worked around by forcing body height to 'auto', see ForceElementSizeFeature.
• In some circumstances, the mobile browser might use a virtual viewport much larger then the available width in the <WebView />, often around 980px for websites which have been built for desktop. For this autoheight component to be reliable, you must ensure that the content has a meta viewport element in the header. You can enforce this behavior with ForceResponsiveViewportFeature.

example

export default function MinimalAutoheightWebView(

webshellProps: ComponentProps<typeof Webshell>

) {

const { autoheightWebshellProps } = useAutoheight({

webshellProps

});

return <Webshell {...autoheightWebshellProps} />;

}

Type parameters:

Name	Type	Description
S	WebshellProps<MinimalWebViewProps, [ExtractFeatureFromClass<typeof HandleHTMLDimensionsFeature>]>	The type of the Webshell props used by this hook.

Parameters:

Name	Type	Description
params	AutoheightParams<S>	The parameters to specify autoheight behavior.

Returns: AutoheightState<S>

• An object to implement autoheight behavior.