@frontity/components
API reference of `@frontity/components` package
This package is a collection of React components that have proven to be pretty useful for a Frontity project.
Table of Contents
How to use
In order to use it, you just have to import the component you want to use in your theme from @frontity/components/
and place it wherever needed. For example, if we want to use the <Image />
component:
Components
Link
<Link />
is a React component that you can use in your Frontity project to define links that works with the internal routing system. Under the hood, this component uses the actions.router.set(link)
method from @frontity/tiny-router
and creates an <a/>
tag.
This component requires having state.source.url
properly configured. Have a look at the guide Setting the URL of the WordPress data source to learn more about this.
Props
All "unknown" props passed to the Link are passed down to an anchor </a>
tag.
Usage
Auto Prefetch
This component can help implementing some auto prefetching strategies. The configuration for this is stored in the state
so final users can modify it in their sites using their frontity.settings.js
file.
Imagine that my-awesome-theme
uses this component. Then, people can set the auto prefetch setting like this:
The possible values for state.theme.autoPrefetch
are:
Custom Link
component
Link
componentUsing this <Link />
component is optional. You can create your own <Link />
component with your own logic.
Example of a custom <Link />
component implementation:
The link
processor
link
processorFrontity provides a link
processor. The link
processor works with the <html2react>
component and can automatically detect <a>
tags in the page/post content and intelligently convert them into <Link>
components.
If the href
attribute of the <a>
tag is either:
a relative link, or
an absolute link on the same domain as the WordPress data source
then the processor will convert the the <a>
tag into a <Link>
component.
The <Link>
component created by the processor will be modelled on the <a>
tag and will have properties consistent with its attributes - e.g. the link
property of the <Link>
component will be the same as the href
attribute of <a>
tag being replaced. The processor will also convert absolute links on the same domain to be relative links.
If the href
attribute of the <a>
tag is an absolute link on a different domain from the WordPress data source, i.e. it is a link to an external site, then that tag will remain as is and will not be replaced or converted.
In order for this to work the link
processor must be imported into the theme and included in the list of html2react
processors. This would normally be done in the root level index.js
of your theme. See the @frontity/html2react
documentation and this page for more info.
This link
processor needs to be added to any theme that wants to uses this Client-side navigation for embedded links in the content.
Image
<Image />
is a React component that adds lazy-loading
to the native WordPress images. Combined with @html2react/processors
, you can add this functionality and optimize your images pretty easy.
Script
<Script />
is a React component that executes scripts tags found in content.
Props
Usage
External JavaScript file:
Internal JavaScript code
Iframe
<Iframe />
is a React component that implement lazy-load on iframe components. The approach taken in implementing this component is based off the edge cases in the table below.
Native Lazy needs a height attribute. For that reason, we use the Intersection Observer when a height is not provided.
Props
Usage
Switch
The <Switch />
renders the first child component that returns true
as the value of its when
prop.
The last child component (which should not have a when
prop) will be rendered if no other component matches the condition.
You can use it for routing to different components in your theme:
But also inside any other component. For example, in a <Header>
component that has a different menu for the home:
This component is an alternative to applying plain JavaScript logic in React:
Last updated