Category: React

Sometimes, we want to poll API periodically with React.

In this article, we’ll look at how to poll API periodically with React.

Poll an API Periodically with React

To poll API periodically with React, we can call the setInterval function to create a timer that lets us run code periodically.

For instance, we can write:

import React, { useEffect, useState } from "react";

export default function App() {
  const [answer, setAnswer] = useState();

  const getAnswer = async () => {
    const res = await fetch("https://yesno.wtf/api");
    const data = await res.json();
    setAnswer(data);
  };

  useEffect(() => {
    const timer = setInterval(getAnswer, 2000);
    return () => clearInterval(timer);
  }, []);

  return <div>{JSON.stringify(answer)}</div>;
}

We call the useState hook to create the answer state.

Then we create the getAnswer fucntion with the fetch function.

We call setAnswer with data to set the answer value.

Next, we call the useEffect hook with a callback that calls setInterval with the getAnswer function and 2000 to call getAnswer every 2000 milliseconds.

We also return a function that calls clearInterval to clear the timer when we unmount the component.

The empty array in the 2nd argument makes the useEffect callback only runs when the component mounts.

And then we render the answer as a string with JSON.stringify .

Conclusion

To poll API periodically with React, we can call the setInterval function to create a timer that lets us run code periodically.

Sometimes, we want to detect whether an input element is focused within React.

In this article, we’ll look at how to detect whether an input element is focused within React.

Detect Whether an Input Element is Focused within React

To detect whether an input element is focused within React, we can use a state to keep track of when the element is focused or not.

For instance, we can write:

import React from "react";

export default function App() {
  const [focused, setFocused] = React.useState(false);
  const onFocus = () => setFocused(true);
  const onBlur = () => setFocused(false);

  return (
    <>
      <input type="text" onFocus={onFocus} onBlur={onBlur} />
      <p>{focused.toString()}</p>
    </>
  );
}

We call the useState hook to create the focused state.

Then we creatr the onFocus and onBlur functions that calls setFocused with true and false respectively.

Then we set the onFocus function as the value of the onFocus prop which makes it run when we focus on the input.

And we set the onBlur prop to the onBlur function which makes it run when we move our focus away from the input.

Now when we click in and out of the input, we see true and false displayed if we focus in and out of the input respectively.

Conclusion

To detect whether an input element is focused within React, we can use a state to keep track of when the element is focused or not.

Sometimes, we want to use React-Intl’s FormattedMessage component in an input placeholder.

In this article, we’ll look at how to use React-Intl’s FormattedMessage component in an input placeholder.

React-Intl’s FormattedMessage Component in an Input Placeholder

To use React-Intl’s FormattedMessage component in an input placeholder, we can call the intl.formatMessage method to return a string with the translated message.

For example, we can write:

import React from "react";
import { IntlProvider, useIntl } from "react-intl";

const messages = {
  message: "enter your name"
};

const ChildComponent = () => {
  const intl = useIntl();
  const placeholder = intl.formatMessage({ id: "message" });

  return <input placeholder={placeholder} />;
};

export default function App() {
  return (
    <IntlProvider messages={messages} locale="en" defaultLocale="en">
      <ChildComponent />
    </IntlProvider>
  );
}

We have the message object with the messages.

Then we have the ChildComponent component that calls the useIntl hook to get the intl object.

Then we call intl.formatMessage with an object that has the id property set to the key with the message to return the translated message.

And then we can set the returned string as the value of the placeholder .

Finally, we wrap IntlProvider around the ChildComponent so we can use the formatMessage method.

We set the messages to an object with the messages.

locale and defaultLocale are set to the locales.

Conclusion

To use React-Intl’s FormattedMessage component in an input placeholder, we can call the intl.formatMessage method to return a string with the translated message.

Sometimes, we want to listen for click events that are outside of a component with React.

In this article, we’ll look at how to listen for click events that are outside of a component with React.

Listen for Click Events that are Outside of a Component with React

To listen for click events that are outside of a component with React, we can call window.addEventListener to add a click event listener on the whole browser window.

For instance, we can write:

import React, { useEffect } from "react";

export default function App() {
  const pageClick = (e) => {
    console.log(e.target);
  };

  useEffect(() => {
    window.addEventListener("mousedown", pageClick);
  }, []);

  return <div></div>;
}

to create the pageClick function that logs e.target , which is a property with the element that we clicked on.

Then we can use that to listen for window clicks by calling window.addEventListener with 'mousedown' to listen to the mousedown event.

Now when we click anywhere in the browser window, we should see the element that we clicked on logged.

Conclusion

To listen for click events that are outside of a component with React, we can call window.addEventListener to add a click event listener on the whole browser window.

Sometimes, we want to listen for click events that are outside of a component with React.

In this article, we’ll look at how to listen for click events that are outside of a component with React.

Listen for Click Events that are Outside of a Component with React

To listen for click events that are outside of a component with React, we can call window.addEventListener to add a click event listener on the whole browser window.

For instance, we can write:

import React, { useEffect } from "react";

export default function App() {
  const pageClick = (e) => {
    console.log(e.target);
  };

  useEffect(() => {
    window.addEventListener("mousedown", pageClick);
  }, []);

  return <div></div>;
}

to create the pageClick function that logs e.target , which is a property with the element that we clicked on.

Then we can use that to listen for window clicks by calling window.addEventListener with 'mousedown' to listen to the mousedown event.

Now when we click anywhere in the browser window, we should see the element that we clicked on logged.

Conclusion

To listen for click events that are outside of a component with React, we can call window.addEventListener to add a click event listener on the whole browser window.