Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
React Answers

How to use Redirect in React react-router-dom v5?

Labrador retriever puppy walking on green grass

Sometimes, we want to use Redirect in React react-router-dom v5.

In this article, we’ll look at how to use Redirect in React react-router-dom v5.

How to use Redirect in React react-router-dom v5?

To use Redirect in React react-router-dom v5, we call history.push.

For instance, we write

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  const handleClick = () => {
    history.push("/home");
  };

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

to call the useHistory hook to return the history object.

Then we call history.push to go to the '/home' URL.

And then we set onClick prop to handleClick to do the redirect when we click the button.

Conclusion

To use Redirect in React react-router-dom v5, we call history.push.

Categories
JavaScript Answers

How to include text in middle of date format with Moment.js and JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to include text in middle of date format with Moment.js and JavaScript.

In this article, we’ll look at how to include text in middle of date format with Moment.js and JavaScript.

How to include text in middle of date format with Moment.js and JavaScript?

To include text in middle of date format with Moment.js and JavaScript, we escape it with square brackets.

For instance, we write

const s = moment().format("MMM. D, YYYY [at] h:mm A z");

to call format with "MMM. D, YYYY [at] h:mm A z" to return a datetime string with ‘at’ between the date and time.

Conclusion

To include text in middle of date format with Moment.js and JavaScript, we escape it with square brackets.

Categories
CSS

How to vertically centering Bootstrap modal window?

Labrador retriever puppy walking on green grass

Sometimes, we want to vertically centering Bootstrap modal window.

In this article, we’ll look at how to vertically centering Bootstrap modal window.

How to vertically centering Bootstrap modal window?

To vertically centering Bootstrap modal window, we use the modal-dialog-centered class.

For instance, we write

<button
  type="button"
  class="btn btn-primary"
  data-toggle="modal"
  data-target="#exampleModalCenter"
>
  Launch demo modal
</button>

<div
  class="modal fade"
  id="exampleModalCenter"
  tabindex="-1"
>
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">...</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

to add the modal-dialog-centered class to the div that has the modal-dialog class to vertically center the modal.

Conclusion

To vertically centering Bootstrap modal window, we use the modal-dialog-centered class.

Categories
JavaScript Answers

How to use window.location to open URL in a new tab with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to use window.location to open URL in a new tab with JavaScript.

In this article, we’ll look at how to use window.location to open URL in a new tab with JavaScript.

How to use window.location to open URL in a new tab with JavaScript?

To use window.location to open URL in a new tab with JavaScript, we call window.open with '_blank' as the 2nd argument.

For instance, we write

window.open("https://example.com", "_blank");

to call window.open with the URL of the page we want to open and '_blank' to open it in a new tab.

Conclusion

To use window.location to open URL in a new tab with JavaScript, we call window.open with '_blank' as the 2nd argument.

Categories
JavaScript Answers

How to use querySelectorAll to retrieve direct children with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to use querySelectorAll to retrieve direct children with JavaScript.

In this article, we’ll look at how to use querySelectorAll to retrieve direct children with JavaScript.

How to use querySelectorAll to retrieve direct children with JavaScript?

To use querySelectorAll to retrieve direct children with JavaScript, we can use the :scope > pseudoselector.

For instance, we write

const myDiv = document.getElementById("myDiv");
myDiv.querySelectorAll(":scope > .foo");

to get the myDiv element with getElementById.

Then we call querySelectorAll with the ":scope > .foo" select to get the direct children of the myDiv element with the foo class.

Conclusion

To use querySelectorAll to retrieve direct children with JavaScript, we can use the :scope > pseudoselector.