Categories
React Answers

How to create a countdown timer in React?

Sometimes, we want to create a countdown timer in React.

In this article, we’ll look at how to create a countdown timer in React.

How to create a countdown timer in React?

To create a countdown timer in React, we use the react-countdown package.

To install it, we run

npm i react-countdown

Then we write

import React from "react";
import ReactDOM from "react-dom";
import Countdown from "react-countdown";

const Completionist = () => <span>You are good to go!</span>;

ReactDOM.render(
  <Countdown date={new Date("2022-09-26T10:05:29.896Z").getTime()}>
    <Completionist />
  </Countdown>,
  document.getElementById("root")
);

to add the Countdown component to start the count down from the date prop value.

We render Completionist if the count down timer is finished.

Conclusion

To create a countdown timer in React, we use the react-countdown package.

Categories
React Answers

How to create custom functions in a React component?

Sometimes, we want to create custom functions in a React component.

In this article, we’ll look at how to create custom functions in a React component.

How to create custom functions in a React component?

To create custom functions in a React component, we just add them into the component class.

For instance, we write

export default class Archive extends React.Component {
  saySomething(something) {
    console.log(something);
  }

  handleClick(e) {
    this.saySomething("element clicked");
  }

  componentDidMount() {
    this.saySomething("component did mount");
  }

  render() {
    return <button onClick={this.handleClick.bind(this)} value="Click me" />;
  }
}

to add the saySomething and handleClick methods into the Archive component.

Conclusion

To create custom functions in a React component, we just add them into the component class.

Categories
React Answers

How to determine if the application is being viewed on mobile or desktop browser with React?

Sometimes, we want to determine if the application is being viewed on mobile or desktop browser with React.

In this article, we’ll look at how to determine if the application is being viewed on mobile or desktop browser with React.

How to determine if the application is being viewed on mobile or desktop browser with React?

To determine if the application is being viewed on mobile or desktop browser with React, we use the react-device-detect package.

To install it, we run

npm install react-device-detect --save

Then we use it by writing

import { isMobile } from "react-device-detect";

const MyComponent = () => {
  if (isMobile) {
    return <div> This content is available only on mobile</div>;
  }
  return <div> content... </div>;
};

to check is isMobile is true in MyComponent .

If it’s true, then the component is loaded on a mobile device.

Conclusion

To determine if the application is being viewed on mobile or desktop browser with React, we use the react-device-detect package.

Categories
React Answers

How to display binary data as image in React?

Sometimes, we want to display binary data as image in React.

In this article, we’ll look at how to display binary data as image in React.

How to display binary data as image in React?

To display binary data as image in React, we can set the src prop of the img element to a base64 URL.

For instance, we write

const data =
  "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

const Example = ({ data }) => <img src={`data:image/jpeg;base64,${data}`} />;

to set the src prop of the img element in Example to a base64 URL with the binary image data.

Then the image will be displayed.

Conclusion

To display binary data as image in React, we can set the src prop of the img element to a base64 URL.

Categories
React Answers

How to only allow numbers in a number input in React?

Sometimes, we want to only allow numbers in a number input in React.

In this article, we’ll look at how to only allow numbers in a number input in React.

How to only allow numbers in a number input in React?

To only allow numbers in a number input in React, we can check for the key that’s pressed.

For instance, we write

<input
  onKeyPress={(event) => {
    if (!/[0-9]/.test(event.key)) {
      event.preventDefault();
    }
  }}
/>

to set the onKeyPress prop to a function that checks the key that’s pressed with event.key.

If it’s not 0 to 9, then we call preventDefault to stop the character from being appending to the input value.

Conclusion

To only allow numbers in a number input in React, we can check for the key that’s pressed.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.