Category: React

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.

Sometimes, we want to generate a PDF file from React components with JavaScript.

In this article, we’ll look at how to generate a PDF file from React components with JavaScript.

Generate a PDF File from React Components

To generate a PDF file from React components, we can use the js-pdf and react-dom/server libraries.

To install js-pdf , we run:

npm i js-pdf

react-dom/server comes with projects created by Create React App by default.

To use it, we write:

import React from "react";
import ReactDOMServer from "react-dom/server";
import jsPDF from "jspdf";
const doc = new jsPDF();
const Foo = <b>foo</b>;

export default function App() {
  const save = () => {
    doc.html(ReactDOMServer.renderToStaticMarkup(Foo), {
      callback: () => {
        doc.save("myDocument.pdf");
      }
    });
  };

  return (
    <div>
      <button onClick={save}>save</button>
    </div>
  );
}

We create a new instance of the jsPDF constructor and assign it to doc .

Then we have the Foo JSX expression which renders some bold text.

Next, in App , we create the save function that calls the doc.html method with the HTML string created by renderToStaticMarkup method.

And then we set the callback property to a function that calls docs.save with the file name to save the rendered HTML version of Foo as a PDF.

Conclusion

To generate a PDF file from React components, we can use the js-pdf and react-dom/server libraries.

How to add iconify into a React project?

We install it with

npm install --save-dev @iconify/react @iconify-icons/cib

Then we import the library by adding

import { Icon, InlineIcon } from '@iconify/react';
import bitcoinIcon from '@iconify-icons/cib/bitcoin';