@bbc/psammead-content-anchor

⛔️ This is an alpha component ⛔️

This component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.

psammead-content-anchor -

Description

ContentAnchor is a component to mitigate the jarring user experience of the page moving while the user is in the middle of consuming the content.

Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network. - CSS Working Group

Such content can be wrapped with ContentAnchor to prevent the page from jumping around.

⚠️ Side-effects: This component enables scroll-anchoring by adding overflow-anchor: auto style to the body tag. We recommend you don't override this style and that you also don't explicitly set overflow-anchor: none on any parent elements of ContentAnchor. If you do then the user may experience content shifting.

How it works

ContentAnchor will never resize when in view even if the child content resizes. ContentAnchor content is allowed to resize when it is outside of the viewport. If the ContentAnchor component is above the scrollable region of the viewport and scroll height of the page changes then the Y scroll position is adjusted to prevent a vertical scroll jump that would disrupt the user's reading experience. This technique is called scroll anchoring and can be achieved by setting overflow-anchor: auto on a scrollable container such as the body element. It is enabled in Chrome 56 and Firefox 66 https://caniuse.com/#feat=css-overflow-anchor as an opt-out for developers and is implemented in ContentAnchor using javascript for browsers that do not have support for overflow-anchor.

Installation

npm install @bbc/psammead-content-anchor --save

Props

Argument	Type	Required	Default	Example
children	node	true
initialHeight	String/Number	false	'auto'	400
initialWidth	String/Number	false	'auto'	400

Note - children does not support passing in a React Fragment wrapping several children. Should be e.g. a div.

Usage

import ContentAnchor from  '@bbc/psammead-content-anchor';

<ContentAnchor
  initialHeight={400}
  initialWidth={400}
>
  <Advertisement>
</ContentAnchor>

When to use this component

When you need to use e.g. 3rd party components and want to prevent unexpected visible content jumps. You can use this wrap content such as Visual Journalism content, IDT (data) components and adverts.

When not to use this component

When you are absolutely sure that the child content will never resize.

Accessibility notes

Roadmap

Contributing

Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at the root of the Psammead repository.

Code of Conduct

We welcome feedback and help on this work. By participating in this project, you agree to abide by the code of conduct. Please take a moment to read it.

License

Psammead is Apache 2.0 licensed.