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 Native Answers

How to fit Image in containing View, not the whole screen size with React Native?

Sometimes, we want to fit Image in containing View, not the whole screen size with React Native.

In this article, we’ll look at how to fit Image in containing View, not the whole screen size with React Native.

How to fit Image in containing View, not the whole screen size with React Native?

To fit Image in containing View, not the whole screen size with React Native, we set resizeMode to cover.

For instance, we write

const style = StyleSheet.create({
  imageStyle: {
    alignSelf: "center",
    height: "100%",
    width: "100%",
  },
});

//...

const Comp = () => {
  //...
  return (
    <View>
      <Image
        style={styles.imageStyle}
        resizeMode={"cover"}
        source={item.image}
      />
    </View>
  );
};

to add an Image with the resizeMode prop set to cover.

This will make it fit to the View wrapped around it.

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 Native Answers

How to close React Native modal by clicking on overlay with JavaScript?

Sometimes, we want to close React Native modal by clicking on overlay with JavaScript.

In this article, we’ll look at how to close React Native modal by clicking on overlay with JavaScript.

How to close React Native modal by clicking on overlay with JavaScript?

To close React Native modal by clicking on overlay with JavaScript, we set the visible prop.

For instrance, we write

import React, { useState } from "react";
import {
  Button,
  StyleSheet,
  View,
  TouchableOpacity,
  Modal,
} from "react-native";

const App = () => {
  const [show, setShow] = useState(false);
  return (
    <View>
      <TouchableOpacity style={{ marginTop: 200 }}>
        <Button title="show" onPress={() => setShow(!show)} />
      </TouchableOpacity>
      <Modal transparent={true} visible={show} animationType="slide">
        <TouchableOpacity
          activeOpacity={1}
          style={{ backgroundColor: "#000000aa", flex: 1 }}
          onPress={() => setShow(!show)}
        />

        <View style={{ backgroundColor: "#FFFFFF", flex: 1 }}>
          <View>
            <Button title="close" onPress={() => setShow(!show)} />
          </View>
        </View>
      </Modal>
    </View>
  );
};
export default App;

to set the visible prop to the show state.

If show is true, then the Modal is shown.

Otherwise, it’s hidden.

We call setShow to show the modal in the TouchableOpacity components.

Conclusion

To close React Native modal by clicking on overlay with JavaScript, we set the visible prop.

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