Category: React Answers

Sometimes, we want to add SCSS styles to a React project.

In this article, we’ll look at how to add SCSS styles to a React project.

How to add SCSS styles to a React project?

To add SCSS styles to a React project, we can install the sass package if the React project is created with create-react-app.

To install it, we run:

npm install --save-dev sass

or

yarn add -D sass

Then we import a SCSS file by writing:

import '../scss/styles.scss';

We can rename all *.css files to *.scss to convert CSS files to SCSS files.

Conclusion

To add SCSS styles to a React project, we can install the sass package if the React project is created with create-react-app.

Sometimes, we want to fix the HTML special character (& symbol) not rendering issue in a React component.

In this article, we’ll look at how to fix the HTML special character (& symbol) not rendering issue in a React component.

How to fix the HTML special character (& symbol) not rendering issue in a React component?

To fix the HTML special character (& symbol) not rendering issue in a React component, we can use the dangerouslySetInnerHTML prop.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <>
      <div dangerouslySetInnerHTML={{ __html: "&" }}></div>
    </>
  );
}

to set dangerouslySetInnerHTML to an object with the __html property set to a string with the '&' character set.

Therefore, we should see ‘&’ rendered.

Conclusion

To fix the HTML special character (& symbol) not rendering issue in a React component, we can use the dangerouslySetInnerHTML prop.

Sometimes, we want to add active class using React styled-components.

In this article, we’ll look at how to add active class using React styled-components.

How to add active class using React styled-components?

To add active class using React styled-components, we can add props to the component.

For instance, we write:

import React from "react";
import styled, { keyframes, css } from "styled-components";

const pulse = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`;

const Button = styled.button`
  animation: ${(props) =>
    props.active
      ? css`
          ${pulse} 0.5s linear
        `
      : "none"};
`;
export default function App() {
  return (
    <>
      <Button animationLength="2s" active>
        hello
      </Button>
    </>
  );
}

We create the keyframes with the keyframes tag and a keyframe string.

Then we add the Button component with the styled.button tag.

We run the animation on the button only with the active prop is true by returning in props.active ? css ${pulse} 0.5s linear : "none" in the function.

Finally, we add the Button into App and set the animationLength and active props.

Now we should see animation in the button since we set the active prop to true.

Conclusion

To add active class using React styled-components, we can add props to the component.

Sometimes, we want to add favicon to the Helmet component in React.

In this article, we’ll look at how to add favicon to the Helmet component in React.

How to add favicon to the Helmet component in React?

To add favicon to the Helmet component in React, we can add the link tag with the favicon inside Helmet.

For instance, we write:

import React from "react";
import Helmet from "react-helmet";

export default function App() {
  return (
    <>
      <Helmet>
        <title>ABC</title>
        <link
          rel="icon"
          type="image/png"
          href="https://icons.duckduckgo.com/ip3/www.google.com.ico"
          sizes="16x16"
        />
      </Helmet>
    </>
  );
}

to add the link tag to add the favicon into our app inside the Helmet component.

Now we should see the favicon displayed

Conclusion

To add favicon to the Helmet component in React, we can add the link tag with the favicon inside Helmet.

To get current language with react-i18next, we can inject the i18n prop into our component with the withTranslation higher order component.

For instance, we write:

import React from "react";
import i18n from "i18next";
import { withTranslation, initReactI18next } from "react-i18next";

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        "Welcome to React": "Welcome to React and react-i18next"
      }
    }
  },
  lng: "en",
  fallbackLng: "en",
  interpolation: {
    escapeValue: false
  }
});

const HomeComponent = ({ i18n }) => {
  return <div>{i18n.language}</div>;
};

const Home = withTranslation()(HomeComponent);

export default function App() {
  return (
    <div>
      <Home />
    </div>
  );
}

We initialize react-i18next with:

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        "Welcome to React": "Welcome to React and react-i18next"
      }
    }
  },
  lng: "en",
  fallbackLng: "en",
  interpolation: {
    escapeValue: false
  }
});

Next, we create the HomeComponent that takes the i18n prop.

And we get the current language with the i18n.language property.

Next, we call the withTranslation HOC with HomeComponent to return a new component with the i18n prop set.

Finally, we render Home in App.