@frontity/components/
and place it wherever needed. For example, if we want to use the <Image />
component:<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.state.source.url
properly configured. Have a look at the guide Setting the URL of the WordPress data source to learn more about this.link
onClick
undefined
onClick
handler. Can be used to pass an optional callback that will be invoked on click.scroll
true
prefetch
true
state.theme.autoPrefetch
.aria-current
undefined
</a>
tag.state
so final users can modify it in their sites using their frontity.settings.js
file.my-awesome-theme
uses this component. Then, people can set the auto prefetch setting like this:state.theme.autoPrefetch
are:no
hover
in-view
all
Link
component<Link />
component is optional. You can create your own <Link />
component with your own logic.<Link />
component implementation:link
processorlink
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.href
attribute of the <a>
tag is either:<a>
tag into a <Link>
component.<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.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.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.link
processor needs to be added to any theme that wants to uses this Client-side navigation for embedded links in the content.<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 />
is a React component that executes scripts tags found in content.src
URL
to an external JavaScript
file.code
JavaScript
codeid
ID
for script element<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.title
JavaScript
codesrc
URL
to an external JavaScript
file.width
height
className
loading
"lazy"
| "eager"
| "auto"
Default value: "lazy"
rootMargin
<Switch />
renders the first child component that returns true
as the value of its when
prop.when
prop) will be rendered if no other component matches the condition.<Header>
component that has a different menu for the home: