DEV Community: Katsiaryna (Kate) Lupachova

Export multiple charts to PDF with React and jsPDF

Katsiaryna (Kate) Lupachova — Fri, 18 Feb 2022 08:30:32 +0000

Originally published on my personal blog

Intro

It's pretty standard functionality for the dashboard (and not only) apps to export charts to PDF. Recently I needed to implement the following feature for one of the apps: a user should be able to export multiple charts into a multipage PDF document. Surprisingly, I spent a significant amount of time finding and developing a suitable solution. In this blog post, I'll describe how I solved this problem.

I'm going to use the following libraries:

Highcharts and it's official wrapper for React
jsPDF
htmlToImage

Highcharts

As we already have been using the Highcharts library on the project, I will use this library for chart rendering in this tutorial. But the following approach, I believe, is suitable for other most commonly used React chart libraries.

First, let's add highcharts and highcharts-react-official (it's an official Highcharts wrapper for React) dependencies:



npm install highcharts highcharts-react-official

Next, we need to render several charts that we are going to export to PDF later.

Create a Chart component that will render a Highchart that accepts different chart options.



//Chart.tsx

import HighchartsReact from "highcharts-react-official";
import Highcharts from "highcharts";

type ChartProps = {
  chartOptions: Highcharts.Options;
};

export default function Chart({ chartOptions }: ChartProps) {
  return (
    <div className="custom-chart">
      <HighchartsReact
        highcharts={Highcharts}
        options={chartOptions}
        containerProps={{ style: { height: "100%" } }}
      />
    </div>
  );
}

Note the class name of "custom-chart" of the wrapper div. We'll use it later.

And then to create a line chart, for example, we just need to pass options object for a line chart:



//options.ts
import Highcharts from "highcharts";

export const lineChartOptions: Highcharts.Options = {
  title: {
    text: "Chart 1",
  },
  series: [
    {
      type: "line",
      data: [1, 2, 3, 8, 4, 7],
    },
    {
      type: "line",
      data: [5, 7, 6, 9, 5, 4],
    },
  ],
};

//other chart options ommitted

Here we can add as many charts as we like:



//App.tsx

import "./App.css";
import Chart from "./Chart";
import {
  barChartOptions,
  columnChartOptions,
  lineChartOptions,
} from "./options";

function App() {
  return (
    <div className="App">
      <Chart chartOptions={lineChartOptions} />
      <Chart chartOptions={barChartOptions} />
      <Chart chartOptions={columnChartOptions} />
      <div className="row">
        <Chart chartOptions={lineChartOptions} />
        <Chart chartOptions={columnChartOptions} />
      </div>
    </div>
  );
}

export default App;

That's what we've got so far:

Export to PDF

There are numerous libraries that help with creating pdf docs. After investigating a couple of options, I've decided to use jsPDF library.

Highcharts (the same as most chart libraries) are mainly SVG elements. And it's tricky to convert SVG to PDF. At least I couldn't find any simple out-of-the-box solution. I've tried different approaches and libraries (canvg, html2canva, svg2pdf.js are among them), but nothing worked for me. Here is what has worked for me.

Basically, the main steps are:

Initialize a new jsPDF instance
Get all charts as HTML Elements
Convert each HTML Element with chart into image (with htmlToImage library)
Add converted chart image to the pdf doc with jsPDF's addImage() method
As we are adding multiple charts, create a new pdf page when needed
Download generated pdf doc using jspdf's save() method

Now let's implement all these. Install jsPDF and htmlToImage packages:



npm install jspdf html-to-image

I prefer to keep all business logic separate from UI logic. So, create a new utils.ts file where we are going to write all the export to pdf logic.



// utils.ts

export async function exportMultipleChartsToPdf() {
  const doc = new jsPDF("p", "px"); // (1)

  const elements = document.getElementsByClassName("custom-chart"); // (2)

  await creatPdf({ doc, elements }); // (3-5)

  doc.save(`charts.pdf`); // (6)
}

Here we initialize a new jspdf instance with portrait orientation ("p" parameter) and pixels ("px") as units of measure.

The essential thing in the above code is that the charts wrapper div class name should be unique for the app. It should be something more complex than just "custom-chart" in the production app.

Now let's implement steps 3-5.

To convert each chart HTML Element into image, we need to loop through the HTMLCollection of Elements and convert each element to image. Note that we need a base64-encoded data URL and it's very convenient that htmlToImage library does exactly that.



for (let i = 0; i < elements.length; i++) {
  const el = elements.item(i) as HTMLElement;
  const imgData = await htmlToImage.toPng(el);
}

That was step 3. Now we need to add each image data to a pdf document. Let's check the docs for jspdf's addImage() method. The addImage() method accepts 9 arguments:

imageData - base64 encoded DataUrl or Image-HTMLElement or Canvas-HTMLElement. We got this covered in the previous step.
format - format of file. It is "PNG" in our case.
x - x Coordinate (in units declared at the inception of PDF document) against the left edge of the page. Say it would be 10px.
y - y Coordinate (in units declared at the inception of PDF document) against the upper edge of the page. This one is a little bit trickier. We need to have a variable for keeping track of the used or already occupied pdf page space, e.g., start with the initial value of 20px, for example, and then increase it every time by the added image height.
width - width of the image (in pixels in our case)
height - height of the mage (again in pixels)
alias - alias of the image (if used multiple times). This is a very important prop when adding multiple images. Without using it we'll have a blank page in our specific case.
compression
rotation

We are not going to use 8th and 9th props.

For getting the width and height of a chart container, we'll use offsetWidth and offsetHeight props of the HTML Element class. Let's implement this.



let top = 20;

for (let i = 0; i < elements.length; i++) {
  const el = elements.item(i) as HTMLElement;
  const imgData = await htmlToImage.toPng(el);

  const elHeight = el.offsetHeight;
  const elWidth = el.offsetWidth;

  doc.addImage(imgData, "PNG", 10, top, elWidth, elHeight, `image${i}`);
  top += elHeight;
}

So far, so good, but what if the chart's width is greater than a pdf doc's page width? The chart will be cut at the right. To escape this issue, we should resize the chart's width and height proportionally (to keep the initial width / height ratio) in case the chart's width is greater than a page's width.



let top = 20;
const padding = 10;

for (let i = 0; i < elements.length; i++) {
  const el = elements.item(i) as HTMLElement;
  const imgData = await htmlToImage.toPng(el);

  let elHeight = el.offsetHeight;
  let elWidth = el.offsetWidth;

  const pageWidth = doc.internal.pageSize.getWidth();
  // if chart do not fit to the page width
  if (elWidth > pageWidth) {
    const ratio = pageWidth / elWidth;
    //resize chart width and heigth proportionally
    elHeight = elHeight * ratio - padding;
    elWidth = elWidth * ratio - padding;
  }

  doc.addImage(imgData, "PNG", padding, top, elWidth, elHeight, `image${i}`);
  top += elHeight;
}

And the last thing we need to take care of is to create a new pdf page every time there is no space to add a new chart to the current page.



...

const pageHeight = doc.internal.pageSize.getHeight();
//if chart do not fit to the page height
if (top + elHeight > pageHeight) {
  doc.addPage(); // add new page
  top = 20; // reset height counter
}

...

Thus the final implementation of createPdf function is:



async function creatPdf({
  doc,
  elements,
}: {
  doc: jsPDF;
  elements: HTMLCollectionOf<Element>;
}) {
  let top = 20;
  const padding = 10;

  for (let i = 0; i < elements.length; i++) {
    const el = elements.item(i) as HTMLElement;
    const imgData = await htmlToImage.toPng(el);

    let elHeight = el.offsetHeight;
    let elWidth = el.offsetWidth;

    const pageWidth = doc.internal.pageSize.getWidth();

    if (elWidth > pageWidth) {
      const ratio = pageWidth / elWidth;
      elHeight = elHeight * ratio - padding;
      elWidth = elWidth * ratio - padding;
    }

    const pageHeight = doc.internal.pageSize.getHeight();

    if (top + elHeight > pageHeight) {
      doc.addPage();
      top = 20;
    }

    doc.addImage(imgData, "PNG", padding, top, elWidth, elHeight, `image${i}`);
    top += elHeight;
  }
}

To test how it works, add a button by clicking on which the exportMultipleChartsToPdf function will run.



//App.tsx

import "./App.css";
import Chart from "./Chart";
import {
  barChartOptions,
  columnChartOptions,
  lineChartOptions,
} from "./options";
import { exportMultipleChartsToPdf } from "./utils";

function App() {
  return (
    <div className="App">
      <button className="button" onClick={exportMultipleChartsToPdf}>
        Export to PDF
      </button>
      <Chart chartOptions={lineChartOptions} />
      <Chart chartOptions={barChartOptions} />
      <Chart chartOptions={columnChartOptions} />
      <div className="row">
        <Chart chartOptions={lineChartOptions} />
        <Chart chartOptions={columnChartOptions} />
      </div>
    </div>
  );
}

export default App;

And voilà, we exported multiple (6) charts as multipage (3 pages) pdf document!

Conclusion

The complete code is available in this GitHub repo.

How to create custom reusable ESLint, TypeScript, Prettier config for React apps

Katsiaryna (Kate) Lupachova — Mon, 06 Dec 2021 10:53:32 +0000

Originally published on my personal blog

Intro

There are many tools that help developers eliminate possible errors and bugs, and in the end, ship more robust and maintainable code. Among them, the most commonly used static code analysis tool is ESLint.

Another trendy tool is Prettier. It makes your code look beautiful to developers' eyes (yours included).

And let's not forget about TypeScript! It's a static type checker for JavaScript, and it improves developer experience by a ton.

Plus, we will publish our ESLint and Prettier config as an NPM package, thus making it reusable and easily installable in any React project (well, generally in any Javascript project, but it will contain react.js / React Native specific rules).

Usually, when I start a new React project, I add all the above-mentioned tools manually, one by one. Finally, I found a time to create my custom config package based on the most typical setup on projects that I'm working/worked on. This blog post is a walkthrough of how I did it.

Also, the blog post will cover how to install Husky and lint-staged. Basically, it will ensure that we don't cheat and follow all the necessary rules.

So, let's start!

1. Create a Node.js module

npm init -y

Now we have a project with a basic package.json file.

Make sure that the module name begins with eslint-config-. I named mine as eslint-config-ramonak.

//package.json

...

"name": "eslint-config-ramonak"

...

2. Add ESLint

The easiest way to add ESLint, necessary dependencies, and basic configuration, is by running:

npx eslint --init

You will be prompted to answer different questions. Based on my typical type of projects, I answered them like that:

It will install @typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint, eslint-plugin-react packages as dev dependencies in the project (in your specific use case packages might be different, depending on your answers). And also, it will add .eslintrc file with the basic config.

3. Add Prettier

Run:

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

This will install:

prettier
eslint-config-prettier - to turn off all rules that are unnecessary or might conflict with Prettier
eslint-plugin-prettier - runs Prettier as an ESLint rule and reports differences as individual ESLint issues

Add plugin:prettier/recommended as the last extension in your .eslintrc file:

{
  "extends": [
    ///other plugins
    ...
    "plugin:prettier/recommended"
  ]
}

For the info, it is short for:

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

Now we can add our custom prettier options.

As this blog post's final goal is to create an NPM package, I'll add a prettier config directly into the eslint config without making a separate .prettierrc file. But this might conflict with text editor extensions (like prettier-vscode, for example), as they read directly from .prettierrc file. Possible solutions might be:

1.Create .prettierrc file in your project and copy the configuration from .eslintrc file there.

2.Uninstall (if already installed) a prettier extension and config your text editor to use ESLint extension only for code formatting. More on that here.

//.eslintrc

...
"rules": {
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 100,
        "semi": true
      }
    ]
  }

You can customize your formatting preferences whatever you like. The list of all possible options is here.

4. Add additional ESLint plugins (optional)

There are numerous ESLint plugins available for you to add to your project.

I'm going to add eslint-plugin-react-hooks. Also I like all imports to be nicely sorted. Fot that let's add eslint-plugin-simple-import-sort.

npm i -D eslint-plugin-react-hooks eslint-plugin-simple-import-sort

Then update .eslintrc file:

{
  "extends": [
    // ...
    "plugin:react-hooks/recommended"
  ],
  "plugins": ["simple-import-sort"], //other plugins omitted
  "rules": {
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error"
    //other rules omitted
  }
}

Feel free to add any custom rules based on your specific requirements.

5. Create index.js file

We need to add an entry point to our package. So create index.js file with the following content:

const eslintrc = require("./.eslintrc.json");

module.exports = eslintrc;

6. Declare peer dependencies

As it is stated in the official ESLint docs, you should declare your dependency on ESLint in package.json using the peerDependencies field. So just copy all dev dependencies in the package.json file to peerDependencies field:

//package.json

...

"peerDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.5.0",
    "@typescript-eslint/parser": "^5.5.0",
    "eslint": "^8.4.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.27.1",
    "eslint-plugin-react-hooks": "^4.3.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "prettier": "^2.5.1"
  }

7. Test

Probably it's not a bad idea to test the ESLint config locally before sharing it with the world.

Link your eslint-config module globally by running the following command at the root level of your eslint-config folder:

npm link

Then in the project where you'd like to test your eslint-config run:

npm link <name of your eslint-config>

For example, in my case I run:

npm link eslint-config-ramonak

Please note that you won't see any changes in the packages.json file after running that command. But your eslint-config will be added into node_modules folder.

Additionally, you need to manually install all peer dependencies (that are not present in your project) from your eslint-config package.

Something like this:

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-simple-import-sort prettier

Then you need to tell your project to use your custom eslint-config. For that,

in package.json add or edit (if already exists) eslintConfig field:

"eslintConfig": {
    "extends": [
      "ramonak" //your eslint-config module name
    ]
  }

OR create .eslintrc file with the following content:

{
  "extends": ["ramonak"] //your eslint-config module name
}

Now you can run linter:

npx eslint .

If you'd like fixable errors to be fixed automatically, run:

npx eslint . --fix

8. Publish

You need an NPM account to be able to publish your eslint-config package. If you don't have it, you can sign up here.

Once you are ready to publish, just run:

npm publish

9. Integration with VSCode

Uninstall or disable any previously installed prettier extensions.
Install (if haven't already) ESLint extension
Edit VSCode settings by pressing CMD + SHIFT + P on Mac (or Ctrl + SHIFT + P on Windows), type settings and choose Preferences: Open Settings (JSON). Edit or add the following settings:

// Format a file on save
"editor.formatOnSave": true,
// show eslint icon at bottom toolbar
"eslint.alwaysShowStatus": true,
// turns on Auto Fix for all providers including ESLint
"editor.codeActionsOnSave": {
  "source.fixAll": true
}

Remove "editor.defaultFormatter": "esbenp.prettier-vscode" line if you had it before.

Now all fixable ESLint (including Prettier formatting options) errors will be fixed automatically on a file save.

10. BONUS: Add Husky and lint-staged

To enforce linting rules compliance, let's add Husky and lint-staged. These tools will automate the running of the linting scripts before each commit. If there are any lint errors, the code won't be committed. And lint-staged will help save our precious time as it will make run the lint script only for staged (e.g., files that we updated) and not on the whole project.

Install lint-staged and husky by running just one command:

npx mrm@2 lint-staged

Update config in package.json:

"scripts": {
    //other scripts omitted
    "lint:fix": "eslint . --fix" //add linting script
  },
"lint-staged": {
    "*.{js,jsx,ts,tsx}": "npm run lint:fix" //run linting script only on JS and TypeScript files
  }

Now, whenever you try to commit any JavaScript or TypeScipt files, the linting script will run, and if there are any unresolved errors, these files won't be committed.

Conclusion

If you want to add ESLint, TypeScript, and Prettier config into your project without any additional tooling, just follow steps 2 and 3.

If your is goal is to add ESLint, TypeScript, and Prettier with Husky and lint-staged, use steps 2, 3, and 10.

And you are very welcome to use my custom eslint-config and report any issues or make pull requests.

P.S. Development of my custom eslint-config inspired by eslint-config-wesbos.

Next.js Dashboard layout with TypeScript and Styled components

Katsiaryna (Kate) Lupachova — Mon, 29 Nov 2021 05:41:14 +0000

Originally published on my personal blog

Introduction

Dashboards! I love dashboards! It's my development passion! The majority of the projects that I've been involved with during my tech career revolve around dashboards. At the moment of writing this blog post, I work as a freelancer on two dashboard-y projects.

The solid groundwork for the dashboard project is crucial. The usage of the basic layout template can save hours (if not days) of development work. Previously this year, I developed the dashboard layout using React.js and Material UI.

Over this year, Next.js has gained more and more popularity. It's a fantastic framework, and I love working on the Next.js projects. So I've decided to extract the part of the code from one of my projects (with modifications) and create a classic dashboard layout template, e.g., a starter for future Next.js dashboard projects.

Here is how the final result looks like:

Features

Basic layout: header, the main content area with drawer, footer
Drawer toggle
Multilevel (nested) menu

Technologies used

Next.js v.12
TypeScript v.4
Styled Components v.5
Styled Icons (Material) v.10

1. Initialize Next.js project

We will use TypeScript in this project, so let's start with the Next.js TypeScript template. Run



npx create-next-app@latest --typescript

For styling let's use styled-components library:



npm i styled-components

And as we are using TypeScipt, we also need to add styled-components types as a dev dependency:



npm i -D @types/styled-components

The last dependency that we need for this template is styled-icons, more precisely - materials icon pack:



npm i @styled-icons/material

1a. Nextjs and styled-components setup

The styled-components support server-side rendering. To enable stylesheet rehydration, we need to add a custom pages/_document.js file as per the official Next.js example with some TypeScript tweak:



//pages/_document.tsx

import Document, { DocumentContext } from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

2. General layout

As we have only one layout for the entire app, we will create the DashboardLayout component and then wrap the whole app (pages/_app.tsx) with this layout.



//components/DashboardLayout/index.tsx

type DashboardLayoutProps = {
  children: React.ReactNode,
};

export default function DashboardLayout({ children }: DashboardLayoutProps) {
  return (
    <Container>
      <Header />
      <Content>
        <Sidebar />
        <PageContainer>{children}</PageContainer>
      </Content>
      <Footer />
    </Container>
  );
}

Basically, it's a blueprint of the layout. Now let's add some styled-components magic.



//components/DashboardLayout/styles.ts

import styled from "styled-components";

export const Container = styled.div`
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #000133;
`;

export const Content = styled.div`
  display: flex;
  flex: 1;
`;

export const PageContainer = styled.div`
  padding: 20px;
  width: 80vw;
`;

The Header component:



//components/Header/index.tsx

import { HeaderContainer, TitleContainer } from "./styles";

export default function Header() {
  return (
    <HeaderContainer>
      <TitleContainer>Header</TitleContainer>
    </HeaderContainer>
  );
}

Header styles:



//components/Header/styles.ts

import styled from "styled-components";

export const HeaderContainer = styled.header`
  display: flex;
  background: #00022e;
  height: 50px;
  align-items: center;
  justify-content: center;
  color: #fc86aa;
`;

export const TitleContainer = styled.div`
  margin: auto;
`;

The Footer component:



//components/Footer/index.tsx

import { FooterContainer } from "./Footer.styles";

export default function Footer() {
  return <FooterContainer>Footer</FooterContainer>;
}

Footer styles:



//components/Footer/styles.ts

import styled from "styled-components";

export const FooterContainer = styled.footer`
  display: flex;
  background: #00022e;
  height: 50px;
  align-items: center;
  justify-content: center;
  color: #fc86aa;
`;

And the Sidebar component:



// components/Sidebar/index.tsx

import { SidebarContainer } from "./styles";

export default function Sidebar() {
  return <SidebarContainer>Menu</SidebarContainer>;
}

Sidebar styles:



// components/Sidebar/styles.ts

import styled from "styled-components";

export const SidebarContainer = styled.aside`
  background: #d8dcd6;
  width: 20vw;
`;

The key points of the CSS code above are:

minimum height of the app container equals window height (100 vh)
the header and the footer have fixed height (50 px)
the content takes all available window size (flex: 1) besides parts that were taken by the elements with the fixed height (the header and the footer)
the sidebar has a fixed width (20 vw)

Now wrap all the app in DashboardLayout component:



// pages/_app.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import DashboardLayout from "../components/DashboardLayout";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <DashboardLayout>
      <Component {...pageProps} />
    </DashboardLayout>
  );
}

export default MyApp;

Clear all the demo code in pages/index.tsx file and add only:



//pages/index.tsx

import type { NextPage } from "next";

const Home: NextPage = () => {
  return <div>Content</div>;
};

export default Home;

Run the project:



npm run dev

Currently the layout looks like this:

3. Drawer toggle

It's time to add the menu (drawer) toggle. In order to implement this, we need:

keep track of the drawer state: is it opened or closed
depending on its state, change the width of the drawer (0vw - when closed, 20vw - when opened)
toggle menu icon in the header section

To store and update the drawer's state, we are going to use the useState hook. As both the Header and the Sidebar components need to be aware of the state, we'll put the shared state into the parent component (DashboardLayout) and pass it as a prop to the Header and the Sidebar components.

Plus, we need to be able to toggle the drawer (open or close) by clicking on the icon in the Header component. Thus the state setter (setOpened) should be passed as a prop to the Header component.



//components/DashboardLayout/index.tsx

...

import { useState } from "react";

type DashboardLayoutProps = {
  children: React.ReactNode;
};

export default function DashboardLayout({ children }: DashboardLayoutProps) {
  const [isOpened, setOpened] = useState(false);

  const toggleDrawer = () => {
    setOpened((prev) => !prev);
  };

  return (
    <Container>
      <Header isOpened={isOpened} toggleDrawer={toggleDrawer} />
      <Content>
        <Sidebar isOpened={isOpened} />
        <PageContainer>{children}</PageContainer>
      </Content>
      <Footer />
    </Container>
  );
}

The Header component should have the icon button to open or close the drawer. The icon itself should be different depending on the drawer state.



//components/Header/index.tsx

import { HeaderContainer, TitleContainer, IconContainer } from "./styles";
import { Menu, ChevronLeft } from "@styled-icons/material";

type HeaderProps = {
  isOpened: boolean,
  toggleDrawer: () => void,
};

export default function Header({ isOpened, toggleDrawer }: HeaderProps) {
  return (
    <HeaderContainer>
      <IconContainer onClick={toggleDrawer}>
        {isOpened ? <ChevronLeft /> : <Menu />}
      </IconContainer>
      <TitleContainer>Header</TitleContainer>
    </HeaderContainer>
  );
}

IconContainer styles:



// components/Header/styles.ts

...

export const IconContainer = styled.div`
  padding: 10px;
  cursor: pointer;

  & svg {
    height: 30px;
  }
`;

Each drawer state change should update the Sidebar component's styles, e.g., to change its width. To achieve this, we need to pass the isOpened prop to the SidebarContainer styled component.



//components/Sidebar/index.tsx

import { SidebarContainer } from "./styles";

type SidebarProps = {
  isOpened: boolean;
};

export default function Sidebar({ isOpened }: SidebarProps) {
  return <SidebarContainer isOpened={isOpened}>Menu</SidebarContainer>;

Consume isOpened prop in the styles:



// components/Sidebar/styles.ts`

...

export const SidebarContainer = styled.aside<{ isOpened: boolean }>`
  background: #d8dcd6;
  width: ${(props) => (props.isOpened ? "20vw" : "0vw")};
  transition: width 0.5s;
  overflow: hidden;
`;
```

Check how the layout looks like in the browser:

![demo2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/522hazghfikfrl9kh5g4.gif)

## 4. Multilevel menu

Each dashboard should have navigation. Let's move to the implementation of the multilevel nested menu.

A typical menu option should have the following props:

- name
- icon
- URL (or path)
- sub menu items - if this menu option should have nested options

In 99% of cases, we know all menu items upfront. It means that we can use them as constants.

```jsx
//constants/menu-items.ts

import {
  Dashboard,
  ShoppingCart,
  People,
  AttachMoney,
  AddShoppingCart,
  Done,
  Business,
  HomeWork,
  Person,
} from "@styled-icons/material";

type MenuOption = {
  name: string,
  icon: React.ComponentType,
  url: string,
  subItems?: MenuOption[],
};

const MENU_OPTIONS: MenuOption[] = [
  {
    name: "Dashboard",
    icon: Dashboard,
    url: "/",
  },
  {
    name: "Orders",
    icon: ShoppingCart,
    url: "/orders",
    subItems: [
      {
        name: "New",
        icon: AddShoppingCart,
        url: "/new-orders",
      },
      {
        name: "Completed",
        icon: Done,
        url: "/completed-orders",
      },
    ],
  },
  {
    name: "Customers",
    icon: People,
    url: "/customers",
    subItems: [
      {
        name: "Corporate",
        icon: Business,
        url: "/corporate",
      },
      {
        name: "SMB",
        icon: HomeWork,
        url: "/smb",
        subItems: [
          {
            name: "Retail",
            icon: Person,
            url: "/retail",
          },
        ],
      },
    ],
  },
  {
    name: "Inventory",
    icon: AttachMoney,
    url: "/inventory",
  },
];
```

To render each menu item (including sub-items) with the appropriate style (e.g., margin-left) and know if this particular menu item is the parent item, let's add another additional prop to each menu item - depth. Also, as we later be mapping over menu items and each child component in React should have the key prop, we should add the id prop to each menu item.

We will use the recursive function for this:

```jsx
//constants/menu-items.ts

...

export type MenuItem = {
  name: string,
  icon: React.ComponentType,
  url: string,
  id: string,
  depth: number,
  subItems?: MenuItem[],
};

function makeMenuLevel(options: MenuOption[], depth = 0): MenuItem[] {
  return options.map((option, idx) => ({
    ...option,
    id: depth === 0 ? idx.toString() : `${depth}.${idx}`,
    depth,
    subItems:
      option.subItems && option.subItems.length > 0
        ? makeMenuLevel(option.subItems, depth + 1)
        : undefined,
  }));
}

export const MENU_ITEMS: MenuItem[] = makeMenuLevel(MENU_OPTIONS);
```

So, the makeMenuLevel function takes an array of previously created menu options and a depth with the initial value equals zero as arguments. Inside this function, we map over the array of option items and return the new option object with two additional props:

- id
- depth

And then call this function recursively again to implement the same logic for the subItems array increasing the depth by 1.

Now let's render the menu items.

```jsx
// components/Sidebar/index.tsx

import { SidebarContainer } from "./styles";
import { MENU_ITEMS } from "../../constants/menu-items";
import MenuItemsList from "../MenuItemsList";

type SidebarProps = {
  isOpened: boolean,
};

export default function Sidebar({ isOpened }: SidebarProps) {
  return (
    <SidebarContainer isOpened={isOpened}>
      <MenuItemsList options={MENU_ITEMS} />
    </SidebarContainer>
  );
}
```

Add new MenuItemsList, MenuItem and ExpandIcon components:

```jsx
//components/MenuItemsList/index.tsx

import { MenuItem as MenuItemType } from "../../constants/menu-items";
import MenuItem from "../MenuItem";

type MenuItemsListProps = {
  options: MenuItemType[],
};

export default function MenuItemsList({ options }: MenuItemsListProps) {
  return (
    <>
      {options.map((option) => (
        <MenuItem menuItem={option} key={option.id} />
      ))}
    </>
  );
}
```

```jsx
//components/MenuItem/index.tsx

import Link from "next/link";
import { useRouter } from "next/router";
import { MenuItem as MenuItemType } from "../../constants/menu-items";
import { MenuItemContainer } from "./styles";
import MenuItemsList from "../MenuItemsList";
import ExpandIcon from "../ExpandIcon";
import { useState } from "react";

type MenuItemProps = {
  menuItem: MenuItemType,
};

export default function MenuItem({
  menuItem: { name, icon: Icon, url, depth, subItems },
}: MenuItemProps) {
  const [isExpanded, toggleExpanded] = useState(false);

  const router = useRouter();
  const selected = router.asPath === url;
  const isNested = subItems && subItems?.length > 0;

  const onClick = () => {
    toggleExpanded((prev) => !prev);
  };

  return (
    <>
      <MenuItemContainer className={selected ? "selected" : ""} depth={depth}>
        <Link href={url} passHref>
          <div className="menu-item">
            <Icon />
            <span>{name}</span>
          </div>
        </Link>
        {isNested ? (
          <ExpandIcon isExpanded={isExpanded} handleClick={onClick} />
        ) : null}
      </MenuItemContainer>
      {isExpanded && isNested ? <MenuItemsList options={subItems} /> : null}
    </>
  );
}
```

The MenuItem styles:

```jsx
//components/MenuItem/styles.ts

import styled from "styled-components";

export const MenuItemContainer =
  styled.a <
  { depth: number } >
  `
  display: flex;
  flex-direction: row;
  font-size: 20px;
  padding: 10px 0px 10px 10px;
  align-items: center;
  justify-content: space-between;

  & svg {
    height: 30px;
    margin-right: 10px;
  }

  &:hover {
    background-color: #00022e;
    color: #fc86aa;
    opacity: 0.5;
    cursor: pointer;
  }

  .menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: ${({ depth }) => `${depth}rem`};
  }

  &.selected {
    background-color: #00022e;
    color: #fff;
  }
`;
```

```jsx
//components/ExpandIcon/index.tsx

import { ExpandMore, ExpandLess } from "@styled-icons/material";

type ExpandIconPros = {
  isExpanded: boolean,
  handleClick: () => void,
};

export default function ExpandIcon({
  isExpanded,
  handleClick,
}: ExpandIconPros) {
  return isExpanded ? (
    <ExpandLess onClick={handleClick} />
  ) : (
    <ExpandMore onClick={handleClick} />
  );
}
```

The main logic happens in the MenuItem component:

- to define whether this menu item is currently active (selected), we check if the item's url prop is equal to the current path with the help of the next/router
- the isNested variable defines if the menu item has sub-items
  - if yes, then the ExpandIcon component is rendered
  - by clicking on the ExpandIcon we change the isExpanded state. If isExpanded is equal to true, we recursively render the MenuItemsList component passing the subItems array as a prop.

It's straightforward to define navigation in Next.js. Every file name in the page directory is associated with the respective route.

So, for example, to create a placeholder for the orders page in our layout, just add the orders.tsx file in the pages directory:

```jsx
// pages/orders.tsx

import type { NextPage } from "next";

const Orders: NextPage = () => {
  return <div>Orders</div>;
};

export default Orders;
```

Then repeat this procedure for all other pages.

And that's it! The final result is:

![demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lj70k0b251g1oi9libg.gif)

## Conclusion

The complete code (with some extra bonuses) is available in this [GitHub repo](https://github.com/KaterinaLupacheva/nextjs-dashboard-layout).

Next.js, Material UI, MongoDB Personal Dashboard

Katsiaryna (Kate) Lupachova — Mon, 30 Aug 2021 09:18:52 +0000

Originally published on my personal blog

Motivation

As a developer who tries to contribute to the community by writing blog posts, developing and maintaining open-source libraries, and building side projects, I'd like to have a place where I could see and track all these my activities in one place. So I decided to create the dashboard of my personal projects.

Tech Stack

For the tech stack I've chosen to use:

Next.js
TypeScript
Material UI
Recharts - charting library
react-spring - animation library
MongoDB Atlas - cloud-hosted Mongo Database

Overview

The app has a "classic" dashboard layout:

header
dark and light theme switch
sidebar with toggle
content area
footer

Also, the app uses ESLint custom rules, prettier code formatting, husky git hooks with lint-staged.

Page 1 - Overview of my blog posts, npm packages demo, and hobby apps stats

The first page displays the main stats of the blog posts on my personal website, of the npm packages demos that I developed and maintain, and of the hobby apps that I wrote in my spare time. These stats are rendered in the table and include:

the date of publishing
the title, which also serves as a link to the respective blog post/demo/app
this week number of weeks with comparison to the previous week
total views count
modal window with the chart that shows the number of views for each day during the last month

Published, Last 7 days views and Total views columns are sortable. By default, the data is sorted by the number of views for the last 7 days. The blog posts table has pagination.

The data about the views count is stored in MongoDB Atlas database. There is a dedicated Next.js API Route that communicates with the database. To be able to gather these stats, I developed a custom hook - useViewCounter.

Probably another part that was tricky to implement on this page is the feature of sorting the Material UI table by specific columns. This is how I implemented it.

Page 2 - dev.to stats

I'm a follower of the "Learn in public" concept. When I learn something new while working on a project and I write an article on it, I definitely know the subject better later. Plus I hope this also helps other developers in their "gaining new knowledge" journey.

To use dev.to API you just need to obtain the API key. How to do so is described in the official docs.

There are two stat cards at the top of the page. They show data about followers count and the total number of posts for today. The data is gathered from https://dev.to/api/followers/users and https://dev.to/api/articles/me APIs respectively. "Running numbers" animation implemented with the react-spring library.

Also, there are dynamics of followers count chart. But dev.to API provides data only for the current number of followers. Where do I get the data for the previous days? To be able to display this data we need to:

store followers count in the database (for this I use MongoDB Atlas)
run the cron (scheduled) job for this to happen daily (GitHub actions to the rescue)

The number at the bottom right corner of the followers' count card shows the followers' number change for the last week.

The main section of the page consists of cards with information about each blog post. This data is fetched from https://dev.to/api/articles/me API. Each card has information about:

article's title
date of publishing
number of views, reactions, and comments
tags list
cover image

The card is clickable. By clicking on it, the article opens in a new tab, using the URL data from the API.

All blog posts can be sorted by the published date (sorted by default), number of views, reactions, or comments. How to implement this feature is described in this blog post.

Page 3 - GitHub stats

Before using GitHub REST API you need to create a personal access token. Here are the instructions on how to do so.

At the top of the page, the general GitHub user profile data and main stats indicators are shown. A user profile data is a response from https://api.github.com/user endpoint and it includes:

name
bio
avatar
location
company and other profile information.

The followers' count and the number of the public repos are also coming from the above-mentioned endpoint.

But the data about total stars and total forks amount is calculated based on each repo data. To get the information about all user's repos you should query https://api.github.com/user/repos endpoint.

Same as for dev.to followers count, the data on GitHub total repos, total followers, total stars, and total forks is stored daily in the database with the help of the scheduled GitHub action.

The repositories section of the page displays cards with each repo data, such as:

repo name
website (if exists)
description
number of stars, forks, watchers
language
created at and updated at dates
license

The cards are sortable by stars (default), forks, and the last update date.

I have a separate app that utilizes GitHub REST API - GitHub API dashboard, that I've developed a while back and probably need to update. A user can enter any existing GitHub username and see public information on that user, including profile information, a person's programming languages structure, and repos data.

Page 4 - Twitter stats

I'm not a very active (mildly speaking) Twitter user. I mean I do read other people's tweets, but do not tweet myself often. Maybe this will change eventually, but it is what it is now.

As it's stated in the docs, to get access to the Twitter API you need to:

apply and receive approval for a developer account
get your app's key and tokens.

Specifically for my dashboard, I use v1.1. of the API and Bearer Token for authorization.

The top section of the page displays general information about the Twitter profile. This data comes from https://api.twitter.com/1.1/users/show API and includes:

screen name
name
description
location
when a profile was created
followers count
image URL and so on.

Same as for dev.to and GitHub followers count, the data on Twitter followers is stored daily in the database with the help of the scheduled GitHub action.

The data in the Tweets section of the page comes from https://api.twitter.com/1.1/statuses/user_timeline API. This API returns a tweet's text, date of publishing, retweets and likes count, etc. I visually distinguish if a tweet was a reply to some other tweet and a tweet by itself.

If a tweet returns from the API truncated, I compute a link to its full content.

The tweet cards are sortable by published date (default), retweets, and likes.

Page 5 - NPM packages stats

While developing a piece of functionality for any projects that I'm involved with, sometimes I publish it as a public library on NPM. Thus any developer (myself included) can use it, and I feel great that I can do something useful for a community.

If you'd like to publish your library, I wrote the blog post on how to publish a custom React component to NPM.

There is no need to obtain an API key or token for querying NPM registry API. For the dashboard, I use only the endpoint that provides the data about a package downloads count - https://api.npmjs.org/downloads/. You can read more about it here.

I have 4 public NPM libraries at the moment. There are stats on each of them in the dashboard:

a chart with the daily downloads count for the last month
an average downloads per day (calculated)
weekly downloads

As you can see, the React progress bar library has the biggest downloads count among my libraries so far. The robust UI components libraries are great, and I love to use them. But sometimes you just need one simple customizable component. And I had exactly such a use case. Here is the blog post about how to create a custom progress bar component in 5 minutes.

Conclusion

The source code for my personal dashboard is available in this repo. And here is the live version (deployed on Vercel).

React Native Internationalization with i18next

Katsiaryna (Kate) Lupachova — Wed, 21 Jul 2021 14:54:53 +0000

Originally published on my personal blog

What are we going to build?

We are going to build the React Native app that:

supports multiple languages (with react-i18next library)
gets translations from a Google sheet and writes it straight to the app (with google-spreadsheet library)
sets default language based on a user's device locale
stores a user's language choice in Async storage
has a Language Picker component

Intro

Assume we have a basic React Native project. For this blog post, I'm going to use expo project, but the steps will be the same for a project that was initialized with React Native CLI.

The app has just one screen that renders the text "Hello!" and a button with the title "Press".

The source code:



//App.tsx

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, Button } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello!</Text>
      <Button title="Press" onPress={() => Alert.alert("HELLO")} />
      <StatusBar style="auto" />
    </View>
  );
}

//styles omitted

Now we are going to add support of multiple languages in our app.

Content

general config of react-i18next
get translations from a Google sheet
custom plugin to store selected language in async storage

1. Install and configure react-i18next library

First of all, we need to add react-i18next to our project by running



npm i react-i18next i18next

This will install i18next framework and its React wrapper.

Next we need to configure it by creating a new file, let's say i18n.config.ts (or any other name as you like), at the top level of the project:



import i18n from "i18next";
import { initReactI18next } from "react-i18next";

//empty for now
const resources = {};

i18n.use(initReactI18next).init({
  resources,
  //language to use if translations in user language are not available
  fallbackLng: "en",
  interpolation: {
    escapeValue: false, // not needed for react!!
  },
});

export default i18n;

A list of all config options is available in the docs.

Then just import this file in the entry point of your project: App.tsx for expo projects or index.ts/index.js for React Native CLI projects.



//App.tsx

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, Button } from "react-native";
import "./i18n.config"; // <-- this line added

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello!</Text>
      <Button title="Press" onPress={() => Alert.alert("HELLO")} />
      <StatusBar style="auto" />
    </View>
  );
}

2. Add translations (Google Sheet + automated script)

All translations we are going to add into a separate folder - translations - with a separate JSON file for each supported language.



//translations folder structure

├── translations/
│   ├── be.json
│   ├── de.json
│   ├── en.json
│   ├── es.json
│   ├── fr.json

Usually, the app is being translated by other team members (if your team is international), or by hired interpreters, or by special translation tools. One of the most convenient ways would be to store all translations in a Google Sheet and then automatically generate JSON files and upload them to the project source code - translations folder.

Create a Google Sheet with the following structure:

Column A will have translations keys (HELLO, PRESS, etc). These values will be used as keys in JSON files with translations. Columns B-F will contain translations themselves, the first row - supported languages names (en - English, es - Spanish, fr - French, and so on).

After adding all translations, the Google sheet should look like this:

Now let's move to the fun part - writting a script that:

will read translations from the Google Sheet
will write them straight into the translations folder of the project, each language translations into their respective JSON file, and properly formatted.

For reading data from the Google Sheet, we are going to use the google-spreadsheet library. Let's add it to our project:



npm i google-spreadsheet

The next thing we need to handle is v4 Google sheet API authentication. You can read about it in the google-sheet library docs. I'm going to use the Service account option for this blog post.

Once you followed the steps from the docs, you should have a JSON file with the following keys:



{
  "type": "service_account",
  "project_id": "XXXXXXXXXXXXXXX",
  "private_key_id": "XXXXXXXXXXXXXXX",
  "private_key": "XXXXXXXXXXXXXXX",
  "client_email": "service-account-google-sheet-a@XXXXXXXXXXXX.iam.gserviceaccount.com",
  "client_id": "XXXXXXXXXXXXXXX",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/service-account-google-sheet-XXXXXXXXXXXXX.iam.gserviceaccount.com"
}

Create another folder in your React Native project (I'm going to call it utils) and put this JSON file there. Don't forget to add it to .gitignore!

Now initialize a Google sheet instance in the React Native project.



//utils/script.js

const { GoogleSpreadsheet } = require("google-spreadsheet");
const secret = require("./secret.json");

// Initialize the sheet
const doc = new GoogleSpreadsheet("<YOUR_GOOGLE_SHEET_ID");

// Initialize Auth
const init = async () => {
  await doc.useServiceAccountAuth({
    client_email: secret.client_email, //don't forget to share the Google sheet with your service account using your client_email value
    private_key: secret.private_key,
  });
};

You can find the spreadsheet ID in a Google Sheets URL:



https://docs.google.com/spreadsheets/d/spreadsheetId/edit#gid=0

My spreadsheet ID looks like this:



1hDB6qlijcU5iovtSAisKqkcXhdVboFd1lg__maKwvDI

Now write a function that reads data from our Google sheet with translations.



//utils/script.js
...

const read = async () => {
  await doc.loadInfo(); // loads document properties and worksheets
  const sheet = doc.sheetsByTitle.Sheet1; //get the sheet by title, I left the default title name. If you changed it, then you should use the name of your sheet
  await sheet.loadHeaderRow(); //Loads the header row (first row) of the sheet
  const colTitles = sheet.headerValues; //array of strings from cell values in the first row
  const rows = await sheet.getRows({ limit: sheet.rowCount }); //fetch rows from the sheet (limited to row count)

  let result = {};
  //map rows values and create an object with keys as columns titles starting from the second column (languages names) and values as an object with key value pairs, where the key is a key of translation, and value is a translation in a respective language
  rows.map((row) => {
    colTitles.slice(1).forEach((title) => {
      result[title] = result[title] || [];
      const key = row[colTitles[0]];
      result = {
        ...result,
        [title]: {
          ...result[title],
          [key]: row[title] !== "" ? row[title] : undefined,
        },
      };
    });
  });

  return result;
};

If you run this script



cd utils && node script.js

and print the result object (add console.log(result) before return), you should get the following result:



{
  en: { HELLO: 'Hello', PRESS: 'Press' },
  fr: { HELLO: 'Bonjour', PRESS: 'Presse' },
  es: { HELLO: 'Hola', PRESS: 'Prensa' },
  de: { HELLO: 'Hallo', PRESS: 'Drücken Sie' },
  be: { HELLO: 'Прывітанне', PRESS: 'Прэс' }
}

Next, we need to write this result object in the translations folder, each file per key.



//utils/script.js
...
const fs = require("fs");

...

const write = (data) => {
  Object.keys(data).forEach((key) => {
    fs.writeFile(
      `../translations/${key}.json`,
      JSON.stringify(data[key], null, 2),
      (err) => {
        if (err) {
          console.error(err);
        }
      }
    );
  });
};

So here:

we get the result object for the read function as a param
loop through the keys of this object
write values of a key of the result object (e.g., translations) into a JSON file using Node.js file system module (fs) formatted with JSON.stringify() method.

And finally, chain all the above async methods:



//utils/script.js
...

init()
  .then(() => read())
  .then((data) => write(data))
  .catch((err) => console.log("ERROR!!!!", err));

Now if you run the script again:



node script.js

all the translations should be written in the translations folder as separate JSON files for each language.

To be able to use these translations in our React Native project, we need to:

export these JSON files from the tranlsations folder



//utils/index.js
export { default as be } from "./be.json";
export { default as en } from "./en.json";
export { default as de } from "./de.json";
export { default as es } from "./es.json";
export { default as fr } from "./fr.json";

update i18n.config.ts file:



//i18n.config.ts
...

import { en, be, fr, de, es } from "./translations";

const resources = {
  en: {
    translation: en,
  },
  de: {
    translation: de,
  },
  es: {
    translation: es,
  },
  be: {
    translation: be,
  },
  fr: {
    translation: fr,
  },
};

...

Now we can translate the content of the app with the help of useTranslation hook provided by react-i18next library.



//App.tsx
...
import { useTranslation } from "react-i18next";

export default function App() {
  const { t } = useTranslation();
  return (
    <View style={styles.container}>
      <Text style={styles.text}>{`${t("HELLO")}!`}</Text>
      <Button title={t("PRESS")} onPress={() => Alert.alert(t("HELLO"))} />
      <StatusBar style="auto" />
    </View>
  );
}

//styles omitted

To switch between supported languages in the app, build Language Picker component:



//LanguagePicker.tsx

import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Modal, View, Text, Pressable, StyleSheet } from "react-native";

const LanguagePicker = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const { i18n } = useTranslation(); //i18n instance

  //array with all supported languages
  const languages = [
    { name: "de", label: "Deutsch" },
    { name: "en", label: "English" },
    { name: "fr", label: "Français" },
    { name: "be", label: "Беларуская" },
    { name: "es", label: "Español" },
  ];

  const LanguageItem = ({ name, label }: { name: string; label: string }) => (
    <Pressable
      style={styles.button}
      onPress={() => {
        i18n.changeLanguage(name); //changes the app language
        setModalVisible(!modalVisible);
      }}
    >
      <Text style={styles.textStyle}>{label}</Text>
    </Pressable>
  );

  return (
    <View>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            {languages.map((lang) => (
              <LanguageItem {...lang} key={lang.name} />
            ))}
          </View>
        </View>
      </Modal>
      <Pressable
        style={[styles.button, styles.buttonOpen]}
        onPress={() => setModalVisible(true)}
      >
        //displays the current app language
        <Text style={styles.textStyle}>{i18n.language}</Text>
      </Pressable>
    </View>
  );
};

export default LanguagePicker;

//styles omitted

Add the Language Picker component in the App.tsx:



//App.tsx

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, Button } from "react-native";
import "./i18n.config";
import { useTranslation } from "react-i18next";
import LanguagePicker from "./LanguagePicker";

export default function App() {
  const { t } = useTranslation();
  return (
    <View style={styles.container}>
      <LanguagePicker />
      <Text style={styles.text}>{`${t("HELLO")}!`}</Text>
      <Button title={t("PRESS")} onPress={() => Alert.alert(t("HELLO"))} />
      <StatusBar style="auto" />
    </View>
  );
}

Let's check how it works now:

3. Custom plugin to store chosen language in the local storage

The internationalization works as expected, but wouldn't it be nice to store a user's language choice, so after a user opens the app his/her previously selected language is used by default?

i18next comes with several React Native plugins to enhance the features available. But let's try to write the custom plugin from scratch that:

stores the user's language choice in Async storage
gets the saved language from Async storage on the app start
if there is nothing stored in Async storage, detect a device's language. If it's not supported, use fallback language.

How to create a custom plugin is described in a separate section of i18next docs. For our use case, we need a languageDetector plugin.

Let's get our hands dirty!

- Install @react-native-async-storage/async-storage library

for expo app



expo install @react-native-async-storage/async-storage

for React Native CLI or expo bare React Native app



npm i @react-native-async-storage/async-storage

Additional step for iOS (not needed for expo project):



npx pod-install

- Install expo-localization library



expo install expo-localization

For React Native CLI or expo bare React Native app also follow these additional installation instructions.

- Write languageDetectorPlugin



//utils/languageDetectorPlugin.ts

import AsyncStorage from "@react-native-async-storage/async-storage";
import * as Localization from "expo-localization";

const STORE_LANGUAGE_KEY = "settings.lang";

const languageDetectorPlugin = {
  type: "languageDetector",
  async: true,
  init: () => {},
  detect: async function (callback: (lang: string) => void) {
    try {
      //get stored language from Async storage
      await AsyncStorage.getItem(STORE_LANGUAGE_KEY).then((language) => {
        if (language) {
          //if language was stored before, use this language in the app
          return callback(language);
        } else {
          //if language was not stored yet, use device's locale
          return callback(Localization.locale);
        }
      });
    } catch (error) {
      console.log("Error reading language", error);
    }
  },
  cacheUserLanguage: async function (language: string) {
    try {
      //save a user's language choice in Async storage
      await AsyncStorage.setItem(STORE_LANGUAGE_KEY, language);
    } catch (error) {}
  },
};

module.exports = { languageDetectorPlugin };

- Update i18n config file



//i18n.config.ts
...

const { languageDetectorPlugin } = require("./utils/languageDetectorPlugin");

...

i18n
  .use(initReactI18next)
  .use(languageDetectorPlugin)
  .init({
    resources,
    //language to use if translations in user language are not available
    fallbackLng: "en",
    interpolation: {
      escapeValue: false, // not needed for react!!
    },
    react: {
      useSuspense: false, //in case you have any suspense related errors
    },
  });

...

And that's it! We have added internationalization to the React Native app!

The full source code is available in this repo.

React: enable Google Analytics after a user grants consent

Katsiaryna (Kate) Lupachova — Mon, 08 Feb 2021 10:35:21 +0000

Originally published on my personal blog

Introduction

While working recently on one of the web apps, one of the customer requirements was to track user's activity on the website is only after and if a user gave his/her consent to do so.

This blog post is about my approach to this problem.

Add Google Analytics to React project

The simpliest way to add Google Analytics to any React project is to use React-GA library. Add it by running:



npm install react-ga

For the code not to look messy, I prefer to create separate util files. Create ga-utils.ts file and add there helper method for Google Analytics initialization:



import * as ReactGA from "react-ga";

export const initGA = (id: string) => {
  if (process.env.NODE_ENV === "production") {
    ReactGA.initialize(id);
  }
};

This method takes a Google Analytics tracking ID as a param and makes an initialization only in a production mode (there is no point in enabling GA in a development mode).

Add Cookie Consent

Google Analytics use HTTP Cookies to "remember" what a user has done on previous pages/interactions with the website. You can read more about it here.

Under laws like the GDPR and ePrivacy (Cookie Law), users must provide their consent before cookies can be deployed or installed on their computer.

There is a library that can be used to prompt a user to grant or decline a cookie consent - React cookie consent.

Install it by running:



npm install react-cookie-consent

Then add CookieConsent component in the App.tsx file:



import CookieConsent from "react-cookie-consent";
import "./App.css";

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
      <CookieConsent enableDeclineButton>
        This website uses cookies to enhance the user experience.
      </CookieConsent>
    </div>
  );
}

export default App;

If you run the app, you'll see a Cookie Consent bar at the bottom of the page with two buttons: "I understand" and "I decline".

The next thing is to handle actions when a user declines or accepts cookies usage.

If a user grants permission by clicking on the "I understand" button, then Google Analytics should be initialized.



...
const handleAcceptCookie = () => {
  if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) {
    initGA(process.env.REACT_APP_GOOGLE_ANALYTICS_ID);
  }
};
...

<CookieConsent
  enableDeclineButton
  onAccept={handleAcceptCookie}
>
  This website uses cookies to enhance the user experience.
</CookieConsent>
...

It is a good practice to hide such values as a Google Analytics tracking ID in .env file.



REACT_APP_GOOGLE_ANALYTICS_ID=UA-XXXXXXXXX

Actually, if a user declines cookie usage by clicking on "I decline" button, then nothing should happen. The app should run just without Google Analytics initialization. But we can delete Google Analytics cookies from a browser just in case if they somehow were written there before. This step is totally optional.



import CookieConsent, { Cookies } from "react-cookie-consent";

...

const handleDeclineCookie = () => {
  //remove google analytics cookies
  Cookies.remove("_ga");
  Cookies.remove("_gat");
  Cookies.remove("_gid");
};

...

<CookieConsent
  enableDeclineButton
  onAccept={handleAcceptCookie}
  onDecline={handleDeclineCookie}
>
  This website uses cookies to enhance the user experience.
</CookieConsent>

...

By default, react-cookie-consent library writes a CookieConsent cookie value "true" or "false" based on a user action (accept or decline respectively). You can check this in developer tools on Application tab.

The Cookie Consent bar won't appear on the next app visit from the same browser. So we have to handle Google Analytics initialization on every app run (or website visit) if a user granted prior consent. This can be accomplished with useEffect hook and getConsentValue() function of react-cookie-consent library:



import CookieConsent, {
  getCookieConsentValue,
  Cookies,
} from "react-cookie-consent";

...

useEffect(() => {
    const isConsent = getCookieConsentValue();
    if (isConsent === "true") {
      handleAcceptCookie();
    }
  }, []);
...

The final App.ts file is:



import { useEffect } from "react";

import CookieConsent, {

  getCookieConsentValue,

  Cookies,

} from "react-cookie-consent";

import { initGA } from "./ga-utils";

import "./App.css";

function App() {

  const handleAcceptCookie = () => {

    if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) {

      initGA(process.env.REACT_APP_GOOGLE_ANALYTICS_ID);

    }

  };

const handleDeclineCookie = () => {

    //remove google analytics cookies

    Cookies.remove("_ga");

    Cookies.remove("_gat");

    Cookies.remove("_gid");

  };

useEffect(() => {

    const isConsent = getCookieConsentValue();

    if (isConsent === "true") {

      handleAcceptCookie();

    }

  }, []);

return (

    <div className="App">

      <h1>Hello World!</h1>

      <CookieConsent

        enableDeclineButton

        onAccept={handleAcceptCookie}

        onDecline={handleDeclineCookie}

      >

        This website uses cookies to enhance the user experience.

      </CookieConsent>

    </div>

  );

}

export default App;

Conclusion

This is my take on handling Google Analytics initialization only after a user grants permission in a React app.

The source code is here.

Dashboard layout with React.js and Material-UI

Katsiaryna (Kate) Lupachova — Tue, 02 Feb 2021 13:05:53 +0000

Originally published on my personal blog

What are we going to build?

In this tutorial, we are going to build the "classic" dashboard layout, which consists of:

header
sidebar (or menu drawer) with toggle
content area
and footer

In the first part, we'll develop this layout using "pure" React.js. In the second part - with the use of Material UI library.

Part I - Pure React.js

First, let's create an HTML carcass of the layout.



function App() {
  return (
    <div className="App">
      <div className="header">Header</div>
      <div className="container">
        <aside className="drawer">Drawer</aside>
        <main className="main">Content</main>
      </div>
      <div className="footer">Footer</div>
    </div>
  );
}

Here we have the app container (App class name), which includes:

the header
the container with drawer and the main content area
the footer

Now it's time to add some styling.



.App {
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #000133;
}

.header,
.footer {
  background: #00022e;
  height: 50px;
  color: #fc86aa;
}

.container {
  display: flex;
  flex: 1;
}

.drawer {
  background: #d8dcd6;
  width: 240px;
}

.main {
  flex: 1;
  background: #f7f5f5;
}

The main aspects of the CSS code are:

minimum height of the app container equals window height (100 vh)
the header and the footer have fixed height (50 px)
the container takes all available window size (flex: 1) besides parts that were taken by the elements with the fixed height (the header and the footer)
the drawer has a fixed width (240 px)
the main (or content) area also takes all available space (flex: 1)

The layout looks like this so far:

Drawer toggler

The only thing is left to add is the ability to toggle the drawer. To achieve this we need to:

keep track of the drawer state: is it opened or closed
depending on its state change the width of the drawer (0px - when closed, 240 px - when opened)
toggle menu icon in the header section

To store and update the drawer's we are going to use the useState hook. The initial state of the drawer is closed.



const [isOpened, setIsOpened] = useState(false);

If the drawer is opened, then the opened class will be added to the drawer element. By default, the drawer class will be used in any case.



<aside className={`${isOpened ? "opened" : ""} drawer`}>Drawer</aside>

As the initial drawer state is closed, so initial drawer width should be 0. Plus let's add the CSS transition property for smooth animation.



.drawer {
  background: #d8dcd6;
  width: 0px;
  transition: width 0.7s;
}

.opened {
  width: 240px;
}

To be able to toggle the drawer we need to add the menu icon to the header bar. By clicking on this icon the drawer should become visible and the icon should be changed from menu icon to arrow icon.

As we're going to use the Material-UI library in the second part of this blog post, I'm using the Menu and the ChevronLeftIcon from "@material-ui/icons" package. But you are free to use whatever icons you prefer.



import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";

...
 <div className="header">
  <div className="icon" onClick={() => setIsOpened(!isOpened)}>
    {isOpened ? <ChevronLeftIcon /> : <MenuIcon />}
  </div>
  <div className="header-title">Header</div>
</div>
...

For the header and the icon to look nice, let's update the styles:



.header,
.footer {
  display: flex;
  background: #00022e;
  height: 50px;
  align-items: center;
  justify-content: center;
  color: #fc86aa;
}

.icon {
  padding: 10px;
}

.icon:hover {
  cursor: pointer;
}

.header-title {
  margin: auto;
}

And the result is:

The full code is here.

Part II - Material UI

Oficial Material UI docs have several examples with different drawer options, such as:

Using these examples as a starting point, we aim to build a different layout.

Let's start to add building blocks to our layout.

As for the Header element we'll use a combination of AppBar and Toolbar Material UI components. For the Drawer, we are obviously going to use the Drawer component. All texts will be wrapped into the Typography component.



<div>
  <AppBar>
    <Toolbar>
      <Typography>Header</Typography>
    </Toolbar>
  </AppBar>
  <div>
    <Drawer>Drawer</Drawer>
    <main>Content</main>
  </div>
  <div>
    <Typography>Footer</Typography>
  </div>
</div>

Without styling, it looks far from what we want to achieve. Let's add styles! I prefer to use Hook API Material UI styling solution.

JSX part of the component:



import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import { styles } from "./material-ui.styles";

const useStyles = makeStyles(styles);

const MaterialUI = () => {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <AppBar className={classes.appBar}>
        <Toolbar>
          <Typography>Header</Typography>
        </Toolbar>
      </AppBar>
      {/* empty Toolbar */}
      <Toolbar />
      <div className={classes.container}>
        <Drawer
          variant="permanent"
          {/* overriding default styles */}
          classes={{
            paper: classes.drawer,
          }}
        >
          Drawer
        </Drawer>
        <main className={classes.main}>Content</main>
      </div>
      <div className={classes.footer}>
        <Typography>Footer</Typography>
      </div>
    </div>
  );
};

Styles:



export const styles = () => ({
  root: {
    textAlign: "center",
    display: "flex",
    flexDirection: "column",
    minHeight: "100vh",
    color: "#000133",
  },
  appBar: {
    background: "#00022E",
    color: "#FC86AA",
  },
  container: {
    display: "flex",
    flex: 1,
  },
  drawer: {
    background: "#D8DCD6",
    width: "240px",
    position: "static",
  },
  main: {
    flex: 1,
    background: "#f7f5f5",
    color: "black",
  },
  footer: {
    background: "#00022E",
    height: "50px",
    color: "#FC86AA",
  },
});

Here we have two tricky moments:

For the Drawer to look exactly the way we want, we have to override its default styles.
As the AppBar z-index by default is 1100, it is positioned above all other content, thus the top part of the drawer and the main content area are hidden behind the AppBar. One way to solve this problem is to add an empty Toolbar component that has a default height right before the parent div element of the Drawer and main content.

Current layout:

Now let's add the Drawer toggler.

The steps for achieving this are the same as described in the first part of the blog post.

So, the final code is:



import { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import clsx from "clsx";
import Drawer from "@material-ui/core/Drawer";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import { styles } from "./post.styles";

const useStyles = makeStyles(styles);

const MaterialUI = () => {
  const classes = useStyles();
  const [isOpened, setIsOpened] = useState(false);
  return (
    <div className={classes.root}>
      <AppBar className={classes.appBar}>
        <Toolbar>
          <IconButton
            color="inherit"
            onClick={() => setIsOpened(!isOpened)}
            className={classes.icon}
          >
            {isOpened ? <ChevronLeftIcon /> : <MenuIcon />}
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            Header
          </Typography>
        </Toolbar>
      </AppBar>
      <Toolbar />
      <div className={classes.container}>
        <Drawer
          variant="permanent"
          classes={{
            paper: clsx(classes.drawer, {
              [classes.closed]: !isOpened,
              [classes.opened]: isOpened,
            }),
          }}
        >
          Drawer
        </Drawer>
        <main className={classes.main}>Content</main>
      </div>
      <div className={classes.footer}>
        <Typography variant="h6">Footer</Typography>
      </div>
    </div>
  );
};

Styles:



export const styles = () => ({
  root: {
    textAlign: "center",
    display: "flex",
    flexDirection: "column",
    minHeight: "100vh",
    color: "#000133",
  },
  appBar: {
    background: "#00022E",
    color: "#FC86AA",
  },
  icon: {
    padding: "10px",
  },
  title: {
    margin: "auto",
  },
  container: {
    display: "flex",
    flex: 1,
  },
  drawer: {
    background: "#D8DCD6",
    position: "static",
    transition: "width .7s",
  },
  closed: {
    width: "0px",
  },
  opened: {
    width: "240px",
  },
  main: {
    flex: 1,
    background: "#f7f5f5",
    color: "black",
  },
  footer: {
    background: "#00022E",
    height: "50px",
    color: "#FC86AA",
  },
});

For constructing className strings of the Drawer component conditionally the clsx utility is used.

And here is the custom Material UI Dashboard layout:

Conclusion

Using the above-described technique, I've created a more advanced template with:

TypeScript
React Router
React Context
Responsive design

This template is available in this GitHub repo.

React: How to create a custom Button Group component in 5 minutes

Katsiaryna (Kate) Lupachova — Mon, 09 Nov 2020 09:31:04 +0000

Originally published on my personal blog

Buttons are used in 99.9% of web apps. Also very often developers need to add a group of buttons into an app. A Button group component combines several related buttons.

Let's try to build this widely used component with the selection (active button) functionality.

Render Button group component in the app

Create a new file for the Button group component.

ButtonGroup.js



import React from "react";

const ButtonGroup = () => {
  return (
    <>
      <button>One</button>
      <button>Two</button>
      <button>Three</button>
    </>
  );
};

export default ButtonGroup;

Then render it from inside of the main app entry point:

App.js



import React from "react";
import "./App.css";
import ButtonGroup from "./ButtonGroup";

const App = () => {
  return (
    <div className="App">
      <ButtonGroup />
    </div>
  );
};

export default App;

That's how it looks so far.

Dynamically add buttons

Now refactor the code so buttons wouldn't be so hard-coded.

ButtonGroup.js



const ButtonGroup = ({ buttons }) => {
  return (
    <>
      {buttons.map((buttonLabel, i) => (
        <button key={i} name={buttonLabel}>
          {buttonLabel}
        </button>
      ))}
    </>
  );
};

App.js



const App = () => {
  return (
    <div className="App">
      <ButtonGroup buttons={["One", "Two", "Three"]} />
    </div>
  );
};

So here we:

created an array of strings with buttons labels
passed in it as a prop to a ButtonGroup component
used the map method to loop through an array and render buttons

Active button

Usually when a user clicks on a button in a Button group:

This button should be somehow highlighted, e.g. its style should differ from other buttons.
Something should happen, like render some content, go to another page, etc.

First of all, we need to keep track of an index of an active button. For this, we are going to use useState hook. The initial value of the clickedId variable is set to -1, so at the first render, all buttons are not selected. But when a button is clicked, its index is stored in the state.

ButtonGroup.js



import React, { useState } from "react";

const ButtonGroup = ({ buttons }) => {
  const [clickedId, setClickedId] = useState(-1);
  return (
    <>
      {buttons.map((buttonLabel, i) => (
        <button key={i} name={buttonLabel} onClick={() => setClickedId(i)}>
          {buttonLabel}
        </button>
      ))}
    </>
  );
};

To highlight an active button create a CSS class (actually two classes: for a basic button and a selected button).

button-group.css



.customButton {
    width: 150px;
    height: 50px;
    letter-spacing: 0.5px;
    background-color: #E0314B;
    color: white;
    font-size: 32px;
    border: 1.5px solid #E0314B;
    border-radius: 5px;
    cursor: pointer;
    }

.active{
    background-color: rgb(25, 26, 24);
    border: 1.5px solid rgb(25, 26, 24);
    }

Then define a button's className whether this button is selected or not.

ButtonGroup.js



import React, { useState } from "react";
import "./button-group.css";

const ButtonGroup = ({ buttons }) => {
  const [clickedId, setClickedId] = useState(-1);
  return (
    <>
      {buttons.map((buttonLabel, i) => (
        <button
          key={i}
          name={buttonLabel}
          onClick={() => setClickedId(i)}
          className={i === clickedId ? "customButton active" : "customButton"}
        >
          {buttonLabel}
        </button>
      ))}
    </>
  );
};

And the "doSomethingAfterClick()" function only left do add. We will pass this function as a prop to the ButtonGroup component (child) and do what we need to do after a click in App.js file (parent).

ButtonGroup.js



import React, { useState } from "react";
import "./button-group.css";

const ButtonGroup = ({ buttons, doSomethingAfterClick }) => {
  const [clickedId, setClickedId] = useState(-1);

  const handleClick = (event, id) => {
    setClickedId(id);
    doSomethingAfterClick(event);
  };

  return (
    <>
      {buttons.map((buttonLabel, i) => (
        <button
          key={i}
          name={buttonLabel}
          onClick={(event) => handleClick(event, i)}
          className={i === clickedId ? "customButton active" : "customButton"}
        >
          {buttonLabel}
        </button>
      ))}
    </>
  );
};

export default ButtonGroup;

App.js



import React from "react";
import "./App.css";
import ButtonGroup from "./ButtonGroup";

const App = () => {
  const printButtonLabel = (event) => {
    console.log(event.target.name);
    //do some stuff here
  };
  return (
    <div className="App">
      <ButtonGroup
        buttons={["One", "Two", "Three"]}
        doSomethingAfterClick={printButtonLabel}
      />
    </div>
  );
};

export default App;

For this tutorial purpose, after a button is clicked we just print its label in the console. But of course, in a real-life application, you make an API request, update content, and so on.

Final demo:

Conclusion

This ButtonGroup custom React component with additional features, like orientation (vertical or horizontal) and custom styling, is available as an NPM package.

How to write and use custom hooks in React.js

Katsiaryna (Kate) Lupachova — Mon, 02 Nov 2020 09:48:55 +0000

Originally posted on my personal blog.

What is a Hook in react

Hooks as a new feature was introduced in React 16.8 back in 1Q of 2019 and since then became one of the most valuable features in React.

Hook is a piece of functionality containing its state or other hooks that can be reused in multiple places across the app (or even across many apps if a hook is published as an NPM package).

There are several rules of hooks, most important of them are:

only call hooks at the top level (not inside loops, conditions, or nested functions)
call hooks from React function components (you actually can’t use hooks inside a class component)
and name your custom hook starting with "use". Only this way React will be able to automatically check for a rules violation.

By default, React comes with several build-in hooks. The most widely used of them are:

useState
useEffect
useContext

You can find a full list here.

Writing a custom hook

In this blog post, we'll look at the writing and using three custom hooks:

useSmoothScroll - includes only one other React's hook
useDocTitle - uses two other React's hooks
useRoute + useDocTitle - combine two custom hooks

1. useSmoothScroll custom hook

As we established this earlier, basically hook is a function that uses other hooks. Let's try to write our custom hook!

Assume we'd like to scroll to some element by clicking on the button somewhere in our app. And for it to look nice we want the scroll to happen smoothly.

useSmoothScroll.js

import { useRef } from "react";

const useSmoothScroll = () => {
  const ref = useRef();
  const smoothScroll = () => ref.current.scrollIntoView({ behavior: "smooth" });

  return [ref, smoothScroll];
};

export default useSmoothScroll;

In this custom hook, we are using useRef hook - a default React's hook that returns a mutable ref object. This ref object will be used as a way to access the DOM by passing it to a ref HTML attribute.

smoothScroll is a function that incapsulates Element.scrollIntoView() method.

And finally, the custom hook returns an array that contains a ref object and a function for smooth scrolling to this object (similar to useState React's hook).

Now we can use this custom hook in any component in the app. For example,

import React from "react";
import "./App.css";
import useSmoothScroll from "./hooks/useSmoothScroll";

function App() {
  const [refToScroll, smoothScroll] = useSmoothScroll();

  return (
    <div className="App">
      <button onClick={smoothScroll}>Scroll</button>
      <div style={{ marginTop: "150vh" }} ref={refToScroll}>
        I wanna be seen
      </div>
    </div>
  );
}

export default App;

Here is this app in action:

This hook can be used multiple times across the app. And the important thing is that two components using the same hook do not share the state.

For instance, we can use the useSmoothScroll hook for marking another element to which we'd like to scroll and do so by clicking on another button.

useSmoothScroll.js

import React from "react";
import "./App.css";
import useSmoothScroll from "./hooks/useSmoothScroll";

function App() {
  const [refToScroll, smoothScroll] = useSmoothScroll();
  const [topRef, smoothScrollToTop] = useSmoothScroll();

  return (
    <div className="App">
      <button ref={topRef} onClick={smoothScroll}>
        Scroll
      </button>
      <div style={{ marginTop: "150vh" }} ref={refToScroll}>
        I wanna be seen
      </div>
      <button onClick={smoothScrollToTop}>Go UP</button>
    </div>
  );
}

export default App;

Demo:

2. useDocTitle custom hook

A custom hook can use not only one other hook but as many as you wish. Now let's write a custom hook that contains two other hooks.

useDocTitle.js

import { useState, useEffect } from "react";

const useDocTitle = (title) => {
  const [docTitle, setDocTitle] = useState(title);

  useEffect(() => {
    document.title = docTitle;
  }, [docTitle]);

  return [docTitle, setDocTitle];
};

export default useDocTitle;

This custom hook updates the current title of the document (the name of the current browser's tab).

In this hook two other hooks are used:

useState - for saving and updating the state of the docTitle variable. Title prop is passed as an initial state value.
useEffect - for setting the document.title property to a new value on every change of the docTitle variable.

And this hook can be used in the following way:

import React from "react";
import "./App.css";
import useDocTitle from "./hooks/useDocTitle";

function App() {
  const [, setDocTitle] = useDocTitle("Start page");

  return (
    <div className="App">
      <button onClick={() => setDocTitle("Updated title")}>
        Change doc title
      </button>
    </div>
  );
}

export default App;

The hook in action:

3. useRoute custom hook

Also, a custom hook can be used inside another custom hook.

Let's create a new custom hook - useRoute, which purpose is to update the browser URL without page reload.

useRoute.js

import { useState, useEffect } from "react";

const useRoute = (initialRoute) => {
  const [route, setRoute] = useState(initialRoute);

  useEffect(() => {
    window.history.pushState(null, "", route);
  }, [route]);

  return [route, setRoute];
};

export default useRoute;

The structure of this hook is very similar to our previous useDocTitle hook structure. The main difference is that we use window.history.pushState() method inside the useEffect hook.

Now we are going to add this hook into the useDocTitle hook.

useDocTitle.js

import { useState, useEffect } from "react";
import useRoute from "./useRoute";

const useDocTitle = (title) => {
  const [docTitle, setDocTitle] = useState(title);
  const [, setRoute] = useRoute();

  useEffect(() => {
    document.title = docTitle;
    setRoute(docTitle);
  }, [docTitle]);

  return [docTitle, setDocTitle];
};

export default useDocTitle;

Now the browser's URL will be updated at the same time as when the document title is changed.

So we can use this hook like this:

import React from "react";
import "./App.css";
import useDocTitle from "./hooks/useDocTitle";

function App() {
  const [, setDocTitle] = useDocTitle("home");

  return (
    <div className="App">
      <button onClick={() => setDocTitle("updated")}>
        Change doc title and route
      </button>
    </div>
  );
}

export default App;

And the demo of how it works:

Conclusion

As you see, writing and using custom hooks is pretty easy and straightforward. Depending on your use cases, you can write as many custom hooks as you like and then easily share them between different components of your app. So just have fun! And don't forget to wear a mask and wash your hands!

The complete source code of the tutorial is available in this GitHub repo.

My long story of how I changed careers from bank employee to developer at 35

Katsiaryna (Kate) Lupachova — Tue, 25 Aug 2020 07:09:12 +0000

This blog post is about my path so far, which I went from being a bank clerk to a freelance web developer.

Banking Career

After graduating from Belarussian State Economic University with a Bachelor's degree in finance and credit in 2004, I've spent the next 14 years working as a bank clerk. I've worked in two banks and changed 5 departments in the meantime. Retail and corporate lending, collateral evaluation, financial analysis, credit risk assessment, accounting reports are among the things that I was doing. But gradually my work became like a "Groundhog Day" - every day was the same as the previous one. I liked my work in general and my working team, the boss was great and the salary was good, but I wanted more. I wanted to learn every day, to move forward, and to have more freedom (as a bonus). To look forward to Mondays and not to drag my feet to the office every day.

I always dreamed to have my own business someday, or at least be my own boss. At the same time, I was prone to the automation and optimization of all processes in my banking career. And besides, the tech industry is booming in Belarus for the last decade.

Switching to Programming

So, at 35, with no relevant degree, I've decided to completely change my professional life and to become somebody like a programmer. At the time I didn't have a clear idea of what exactly I'd like to do. I had no friends in the tech industry, nobody who could become my mentor in this journey. So my learning path was very curvy with lots of trials and errors.

While still working at a bank, I've decided to learn a programming language. Simply googling this topic, I've found out that the most popular language at that time was Java (it was 2018). So, let's try to learn it! I've started to do an online free course, but my progress was extremely slow. Working full-time and having a family with a small kid, I literally had a very small time and even less energy to study.

So, together with my husband, we made a decision that I'll quit my banking job and will study full-time. My last working day in the bank was July 13th, 2018. Since then my long and heavy road in development began.

Java Course

I've wanted to start with a beginner level of Java off-line course. But for that, I needed to have a basic understanding of web technologies (HTML, CSS, how the Internet works, and so on). So I had a crash course on that.

Then during the next 6 months, I've successfully completed the Java Fundamentals course and Java Enterprise course in the Educational Center of HI-Tech Park Belarus (IT Academy). There were lots of hard studies during these 6 months. I'd say that it was 95% of self-studies and only 5% of classwork. By the way, I was the only female in the advanced section of the Java course and finished it as the best student in the class!

I understood that I really like programming, all this problem-solving thing. But at the same time, it was obvious that Java is mostly required in big tech companies and I definitely didn't want to go back into the corporate world. Besides, when I was working on my final project of the course, I wanted to have a "normal" front-end, although due to assignment it was enough to display results of the back-end queries in a console. I guess I've tried to use some Java front-end tools like JSP and it was awful!

When the Java course was coming to an end, I've started to think about what should I do next? I had an idea that it would be great to work in a small start-up team. But the problem was that nobody needed a developer with a zero experience. Start-ups require an experienced developer who can bring results fast.

Start-up Projects

Luckily I've found out that there is a lab for IT Academy graduates where junior developers can improve their skills working on a real project in a small team. I was accepted on a project called naakcii.by. It's a service that helps to find groceries and other goods with the best prices among Belarussian stores. By the time when I joined this project (January 2019), it was in a development mode for 8 months. My first assignment was to develop Swagger documentation of the project. After that, the team decided that an admin panel is really would be useful to implement CRUD operations on the database. And once again there was a problem - Java is not a front-end language and we were short in front-end developers.

Then the project's mentor suggested using Vaadin framework for admin panel development. That's how I knew that you can develop front-end parts in Java too! So since February 2019, I've started to learn Vaadin intensively. For the first time, I was reading technical documentation a lot, as this framework is not widely used, so there are very few tutorials on it. It was hard, especially to grasp front-end concepts without almost zero background in classic front-end technologies, like HTML, CSS, and Javascript. But in 2 months of hard work I've developed an admin panel for the project. I was proud of my job, but now looking back, the quality of the code was low and the architecture of the project was not good. But it was a really useful experience and it was my first full-stack Java project. And more importantly, the admin panel was doing its job just fine.

In April-May 2019 a new start-up project was presented to the lab - weekmenu.by: the app for helping families to make a menu for a week (with recipes) that generates a list of ingredients to be bought once in a week. It was decided to join this new project (weekmenu.by) to the existing project (naakcii.by) and start building an ecosystem Happy Family.

By that time most of the team members found jobs in tech companies, so a new portion of IT Academy graduates joined the team. I wasn't looking for a job on purpose. I wanted to gain experience in this start-up world and eventually start my own project. BTW, in April-May 2019 I've attended a Project management course, as I wanted to improve my knowledge base on how to build a process of tech product development in a team.

Work on a new project started very enthusiastically. UI/UX design, user stories, app architecture, ideas about integration of two services, and into 3rd parties API. But unfortunately, it lasted not for long. The lab wasn't paying anything to its members. So people were founding a real job pretty quickly and leaving the project.

The funny thing is that I was the most "experienced" developer of the team at the time. So my responsibilities include app architecture, code review, assistance to other developers. And of course, once again I was developing an admin panel for the project using the Vaadin framework. By the way, in December 2019 I passed an exam and got Vaadin 14 Developer Certificate.

Well, things were moving very slowly. More and more people were leaving the project as they were lacking motivation. The most problem was in finding front-end developers, specifically Angular developers, as the first project (naakcii.by) was developed with Angular, so our mentor had a strong opinion that to integrate two projects they should use the same tech stack (I completely disagree with that). Unfortunately, gradually, the work on the projects completely stopped.

What I've learned working on two start-up projects:

improved my tech skills in Spring Boot, Vaadin, PostgreSQL, Git, Bitbucket, Jira
gained experience in remote work with a team of developers on real projects.
saw how does Scrum methodology looks like in practice.
meet a lot of new really nice people.

Learning Javascript

In the meantime, I was starting to look at freelance job opportunities. But with my tech stack (Java) it was practically impossible to compete with experienced developers. So I decided to switch my programming language preferences and start learning front-end technologies: Javascript and then React.

At the end of October 2019, I've started to learn Javascript. For me, it was way easier to learn Javascript than Java. Maybe because it was a second programming language for me. But overall after "heavy" and strict Java, Javascript was like fresh air. And you can use Javascript (Node.js) for a back-end too!

After learning Javascript fundamentals I moved to React.js. Why did I choose React.js? Once again, because it's the most popular Javascript library.

I was having sooooo much fun learning React! You know, in Java you can't see the results of your work visually. And React is all about UI.

Preparing for Freelance

I've read several articles of experienced freelancers, where the main message was that you should start to find jobs as soon as possible and learning during the process of working on it. I didn't feel that it's the right way for me. I can't take a job if I don't feel that I can accomplish it.

I've decided to practice my front-end skills while developing apps and tools, that I needed in my everyday life. For example, a fitness app (Tabata App) for my personal training, a Financial manager app - to keep track of our family incomes and expenses, a Celebrity recognition app just for fun.

Later I've decided to try to develop a well-know for me thing - admin panels and dashboards. But this time using React. Vaadin is a great tool. You can create a nice dashboard pretty easy and fast using an array of Vaadin's components. But it's become quite challenging to create a dashboard with more custom design. With React you can build whatever you like (UI wise), the sky and your imagination is the limit. So, I've developed several dashboards, like GitHub Dashboard, Coffee Shop Dashboard, Google Analytics Dashboard.

Freelance Job

So, after learning and practicing Javascript (React.js, Node.js / Express.js) for about 6 months (while still doing some minor work for start-ups), I felt sure enough for trying to get some freelance jobs. I've created accounts on freelancer.com and upwork.com. I was bidding only on projects where development or update of a dashboard needed. And to my surprise, I was able to get a customer in a couple of days!

After completing a few small freelance jobs, I've got an invitation for a job interview on Upwork. The job was to develop a web app based on the existing mobile app. During the interview, my previous banking experience was discovered. As the app is at the intersection of technology (blockchain) and banking, I received an offer to join a team in the role of Product Manager. So, for the last 3 months, I'm trying to do my best on a wonderful project Sikoba as a Product Manager. As the team is pretty small, sometimes I do the coding too (BTW, I had to quickly dive into React Native).

So, my current activities include:

work in Sikoba Ltd. as a Product Manager / Developer
small freelance projects
open source contribution
personal projects (for practicing web development skills)
tech blog posts writing

Conclusion

So, this is my professional journey so far. I can truly say that I am completely happy in my career. I do enjoy my daily job, that I have to gain new knowledge every day, meet new people from around a world (online, of course). And I'm my own boss! I'm free to choose a project, free to make my daily schedule, and free to work whenever I want.

My path to development was not easy and not the shortest one. But I wouldn't change a thing. Everything was (and is) as it meant to be.

And remember, it's never too late to pursue your dreams!

Javascript: How to access the return value of a Promise object

Katsiaryna (Kate) Lupachova — Mon, 24 Aug 2020 06:50:22 +0000

Originally posted on my personal blog.

Intro (completely off-topic)

It's has been almost 3 months since my last blog post. There are reasons for that.

First, despite all precautions, I got sick with coronavirus (COVID-19) in the second half of June 2020. For two weeks it was total hell. Very bad well-being, I could only lie in bed and hope that it will go away soon. After that, it was a recovery for the next 2-3 weeks. Now I'm finally got back to normal life and even resumed my fitness training. So, coronavirus is no joke. Please, stay safe.

Second, there are lots of things happening right now in my home country - Belarus. Belarussians are fighting against dictatorship. Our (ex)-president lost last elections which were held on August 9th, 2020, but he continues to stay in power using brutal police and army forces against peaceful people and to threaten to anybody who disagrees with him. But we keep on fighting and to protest every day. I do take all these events very close to heart and hope to wake up one day in a free, democratic, and prosperous Belarus.

Now back to the topic.

What is a Promise in Javascript

A Promise is an object representing the eventual completion or failure of an asynchronous operation.

A Promise may be in one of the following states:

pending
fulfilled
rejected

One of the most widely used examples of asynchronous operations in Javascript is a Fetch API. The fetch() method returns a Promise.

Assume that we fetch some data from a backend API. For this blog post, I'll use JSONPlaceholder - a fake REST API. We will fetch a user's data with the id = 1:

fetch("https://jsonplaceholder.typicode.com/users/1")

Let's see how we can access returned data.

1 - .then() chaining

It is the most simple and the most obvious way.

fetch("https://jsonplaceholder.typicode.com/users/1") //1
  .then((response) => response.json()) //2
  .then((user) => {
    console.log(user.address); //3
  });

Here we (1) fetch data from the API, (2) transform it into JSON object and then (3) print user's address value to the console.

The result is:

{
  street: 'Kulas Light',
  suite: 'Apt. 556',
  city: 'Gwenborough',
  zipcode: '92998-3874',
  geo: { lat: '-37.3159', lng: '81.1496' }
}

2 - Use returned value later in a code

But what if we'd like to use the returned value somewhere later in code?

If we try to do it like this (wrong way!):

const address = fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((response) => response.json())
  .then((user) => {
    return user.address;
  });

console.log(address);

We'll get

Promise { <pending> }

It's happening because the Javascript code always executes synchronously, so the console.log() function starts immediately after the fetch() request, not waiting until it is resolved. In the moment when console.log() function starting to run, a Promise that should be returned from a fetch() request is in a pending status.

That said we can access the returned value of a Promise object in another .then() callback:

const address = fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((response) => response.json())
  .then((user) => {
    return user.address;
  });

const printAddress = () => {
  address.then((a) => {
    console.log(a);
  });
};

printAddress();

OR using async / await syntax:

const address = fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((response) => response.json())
  .then((user) => {
    return user.address;
  });

const printAddress = async () => {
  const a = await address;
  console.log(a);
};

printAddress();

In both ways, we'll get:

{
  street: 'Kulas Light',
  suite: 'Apt. 556',
  city: 'Gwenborough',
  zipcode: '92998-3874',
  geo: { lat: '-37.3159', lng: '81.1496' }
}

Conclusion

A Promise object is widely used in Javascript async programming. And it's sometimes confusing for developers how to use it properly. In this blog post, I've attempted to describe a use case when a developer needs to use a returned value from a Promise object somewhere later in code.

Render, update, and transform Excel spreadsheet data into an array of objects using React.js

Katsiaryna (Kate) Lupachova — Mon, 01 Jun 2020 13:20:29 +0000

Originally posted on my personal blog

Nowadays it’s hard to find a company that doesn’t use MS Excel as an obvious go-to tool for data management. It’s quite simple and accessible software which definitely does a great job in some situations and when managed by a professional. But at the same time, the use of Excel has a lot of disadvantages compared to web tools.

That’s why more and more companies are willing to move out of Excel Hell and switch to modern web applications.

Recently on one of my freelance projects, I needed to develop a feature in the dashboard for a recruiter to be able to quickly upload data about available job positions from an Excel sheet into the app’s database. As I didn’t find any ready-made solution and think it might be an often time used feature, I decided to develop a library by myself and make it available for the community. So any feedback and suggestions are very welcome!

Demo App

Installation

npm install --save @ramonak/react-excel

Usage Example

import { ReactExcel, readFile, generateObjects } from '@ramonak/react-excel';

const App = () => {
  const [initialData, setInitialData] = useState(undefined);
  const [currentSheet, setCurrentSheet] = useState({});

  const handleUpload = (event) => {
    const file = event.target.files[0];
    //read excel file
    readFile(file)
      .then((readedData) => setInitialData(readedData))
      .catch((error) => console.error(error));
  };

  const save = () => {
    const result = generateObjects(currentSheet);
    //save array of objects to backend
    fetch("/api/save", {
        method: 'POST',
        body: JSON.stringify(result)
    });
  };

  return (
    <>
      <input
        type='file'
        accept='.xlsx'
        onChange={handleUpload}
      />
      <ReactExcel
        initialData={initialData}
        onSheetUpdate={(currentSheet) => setCurrentSheet(currentSheet)}
        activeSheetClassName='active-sheet'
        reactExcelClassName='react-excel'
      />
      <button onClick={save}>
          Save to API
      </button>
    </>
  );
}

Description

The library consists of 3 parts:

readFile function - reads excel file with the use of SheetJS library.
ReactExcel component - a custom React.js component for rendering and editing an excel sheet on the screen.
generateObjects function - generates an array of objects from excel sheet data using the following template:

excel sheet data:

id	name	age
1	John	25
2	Mary	31
3	Ann	23

will be transformed into:

[
  {
    id: 1,
    name: "John",
    age: 25
  },
  {
    id: 2,
    name: "Mary",
    age: 31
  },
  {
    id: 3,
    name: "Ann",
    age: 23
  }
]

Conclusion

The complete source code of the @ramonak/react-excel library and the demo app is in this GitHub repo. Published npm package is here.

Feel free to suggest any improvements, create issues, or make feature requests. Any feedback is very welcome!

DEV Community: Katsiaryna (Kate) Lupachova

Export multiple charts to PDF with React and jsPDF

Intro

Highcharts

Export to PDF

Conclusion

How to create custom reusable ESLint, TypeScript, Prettier config for React apps

Intro

1. Create a Node.js module

2. Add ESLint

3. Add Prettier

4. Add additional ESLint plugins (optional)

5. Create index.js file

6. Declare peer dependencies

7. Test

8. Publish

9. Integration with VSCode

10. BONUS: Add Husky and lint-staged

Conclusion

Next.js Dashboard layout with TypeScript and Styled components

Introduction

Features

Technologies used

1. Initialize Next.js project

1a. Nextjs and styled-components setup

2. General layout

3. Drawer toggle

Next.js, Material UI, MongoDB Personal Dashboard

Motivation

Tech Stack

Overview

Pages

Page 1 - Overview of my blog posts, npm packages demo, and hobby apps stats

Page 2 - dev.to stats

Page 3 - GitHub stats

Page 4 - Twitter stats

Page 5 - NPM packages stats

Conclusion

React Native Internationalization with i18next

What are we going to build?

Intro

Content

1. Install and configure react-i18next library

2. Add translations (Google Sheet + automated script)

3. Custom plugin to store chosen language in the local storage

- Install @react-native-async-storage/async-storage library

- Install expo-localization library

- Write languageDetectorPlugin

- Update i18n config file

React: enable Google Analytics after a user grants consent

Introduction

Add Google Analytics to React project

Add Cookie Consent

Conclusion

Dashboard layout with React.js and Material-UI

What are we going to build?

Part I - Pure React.js

Drawer toggler

Part II - Material UI

Conclusion

React: How to create a custom Button Group component in 5 minutes

Render Button group component in the app

Dynamically add buttons

Active button

Conclusion

How to write and use custom hooks in React.js

What is a Hook in react

Writing a custom hook

1. useSmoothScroll custom hook

2. useDocTitle custom hook

3. useRoute custom hook

Conclusion

My long story of how I changed careers from bank employee to developer at 35

Banking Career

Switching to Programming

Java Course

Start-up Projects

Learning Javascript

Preparing for Freelance

Freelance Job