yushanwebdev

export function useFocusInvalid(
  formRef: HTMLFormElement | null,
  hasErrors: boolean,
) {
  useEffect(() => {
    if (!formRef || !hasErrors) return

    if (formRef.matches('[aria-invalid="true"]')) {
      formRef.focus()
    } else {

yushanwebdev

import { getEnv } from '#app/utils/env.server.ts'

export async function loader() {
	const envData = JSON.stringify(getEnv())
	const jsContent = `window.ENV = ${envData};`
	return new Response(jsContent, {
		headers: {
			'Content-Type': 'application/javascript',
		},
	})

yushanwebdev

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

yushanwebdev

// https://github.com/matthew-andrews/isomorphic-fetch/issues/34
// This helped me to solve the issue.

const myHeaders = new Headers();

myHeaders.append('Content-Type', 'application/json');

fetch('/contact-form', {
    method: 'POST',
    headers: myHeader,

yushanwebdev

* {box-sizing: border-box;}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: #404040;
    line-height: 1.6;
}

yushanwebdev

const routes = [
  { path: '/one',
    component: One
  },
  { path: '/two',
    component: Two
  },
  { path: '/three',
    component: Three
  }

yushanwebdev

import React, { useRef } from "react";

const CustomTextInput = () => {
  const textInput = useRef();

  focusTextInput = () => textInput.current.focus();

  return (
    <>
      <input type="text" ref={textInput} />

yushanwebdev

import React, { Component, createRef } from "react";

class CustomTextInput extends Component {
  textInput = createRef();

  focusTextInput = () => this.textInput.current.focus();

  render() {
    return (
      <>