Author: John Au-Yeung

To add react meta description with i18n-next React, we can use the useIntl hook with React Helmet.

We install React Helmet with

npm i react-helmet

Then we use the useIntl hook to get the formatMessage function.

And then we add the meta tag into the Helmet component provided by React Helmet.

Then we set the content prop to a string returned by the f function to get the translated string by the id property.

import { useIntl } from 'react-intl';

const DescriptionMeta = () => {
  const { formatMessage: f } = useIntl();

  return (
    <Helmet>
      <meta name="description" content={f({ id: 'meta.description' })} />
    </Helmet>
  );
};

To turn off suspense with i18n-next React, we set the useSuspense option to false.

To do this, we write

i18n
  .use(XHR)
  .use(LanguageDetector)
  .init({
    react: { 
      useSuspense: false 
    }
});

to set useSuspense to false in the object we pass into the init method.

To add a image and video lightbox with React, we use the React image & video lightbox component.

To install it, we run

npm i react-image-video-lightbox

Then we use it buy writing

<ReactImageVideoLightbox
  data={[
    {
      url: "https://placekitten.com/450/300",
      type: "photo",
      altTag: "some image",
    },
    {
      url: "https://www.youtube.com/embed/ScMzIvxBSi4",
      type: "video",
      title: "some video",
    },
    {
      url: "https://placekitten.com/550/500",
      type: "photo",
      altTag: "some other image",
    },
    {
      url: "https://www.youtube.com/embed/ScMzIvxBSi4",
      type: "video",
      title: "some other video",
    },
  ]}
  startIndex={0}
  showResourceCount={true}
  onCloseCallback={callbackFunction}
  onNavigationCallback={(currentIndex) =>
    console.log(`Current index: ${currentIndex}`)
  }
/>

We add all the content for our lightbox into the data prop of the ReactImageVideoLightbox component by setting data to an array of items we want to show.

Then they’ll all show on the screen.

To make the image background full width with React, we set the backgroundSize CSS style to cover.

For instance, we write

import TechnicalImage from "./images/technical.jpg";

const divStyle = {
  width: "88%",
  height: "800px",
  backgroundImage: `url(${TechnicalImage})`,
  backgroundSize: "cover",
};

<div style={divStyle}>...</div>;

to set the backgroundSize to cover.

Then the image background full width.