@frontity/components

Description

This package is a collection of React components that have proven to be pretty useful for a Frontity project.

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:

import Image from "@frontity/components/image";

Components

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

Name

Type

Default

Optional

Description

src

string

null

true

URL to an external JavaScript file.

code

string

null

true

internal JavaScript code

id

string

null

true

ID for script element

Usage

External JavaScript file:

import Script from "@frontity/components/script";
โ€‹
const MyComponent = () => (
<Script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js />
);

Internal JavaScript code

import Script from "@frontity/components/script";
โ€‹
const MyComponent = () => (
<Script code={`
const body = document.querySelector('body');
// Triggers anytime anywhere in the body of the page is clicked
body.addEventListener('click', e => {
e.preventDefault();
console.log('Button Works');
});
`} />
)

โ€‹

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.

Intersection Observer

Native Lazy

Height > 0

Output

true

true

true

Native Lazy Load

true

true

false

Intersection Observer

true

false

true

Intersection Observer

true

false

false

Intersection Observer

false

true

true

(not possible)

false

true

false

(not possible)

false

false

true

Normal Load (eager)

false

false

false

Normal Load (eager)

Native Lazy needs a height attribute. For that reason, we use the Intersection Observer when a height is not provided.

Props

Name

Type

Default

Optional

Description

src

string

null

true

URL to an external JavaScript file.

title

string

null

false

internal JavaScript code

width

string

null

true

width of the iframe component

height

string

null

true

height of the iframe component

className

string

null

true

class name for the component

loading

string

lazy

true

lazy | eager | auto

rootMargin

string

null

true

margin around root element

Usage

import Iframe from "@frontity/components/iframe";
โ€‹
const MyComponent = () => (
<Iframe
src="https://frontity.org"
title="Frontity"
height="500"
width="500"
/>
);

โ€‹

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:

import Switch from "@frontity/components/switch";
โ€‹
const Theme = ({ state }) => {
const data = state.source.get(state.router.link);
return (
<Switch>
<Loading when={data.isFetching} />
<Home when={data.isHome} />
<Archive when={data.isArchive} />
<Post when={data.isPostType} />
<ErrorPage /> {/* rendered by default */}
</Switch>
);
}

But also inside any other component. For example, in a <Header> component that has a different menu for the home:

import Switch from "@frontity/components/switch";
โ€‹
const Header = ({ state }) => {
const data = state.source.get(state.router.link);
return (
<Switch>
<MenuHome when={data.isHome} />
<Menu /> // rendered by default
</Switch>
);
}

This component is an alternative to applying plain JavaScript logic in React:

const Theme = ({ state }) => {
const data = state.source.get(state.router.link);
return (
<>
{(data.isFetching && <Loading />) ||
(data.isHome && <Home />) ||
(data.isArchive && <Archive />) ||
(data.isPostType && <Post />) ||
<ErrorPage />}
</>
);
}

โ€‹

Still have questions? Ask the community! We are here to help ๐Ÿ˜Š