Yushan Fernando yushanwebdev
🇱🇰
yushanwebdev
/ ref-class-component.js
Created
May 31, 2021 04:32
— forked from cecigarcia/ref-class-component.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component, createRef } from "react"; | |
| class CustomTextInput extends Component { | |
| textInput = createRef(); | |
| focusTextInput = () => this.textInput.current.focus(); | |
| render() { | |
| return ( | |
| <> |
yushanwebdev
/ ref-functional-component.js
Created
May 31, 2021 04:34
— forked from cecigarcia/ref-functional-component.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useRef } from "react"; | |
| const CustomTextInput = () => { | |
| const textInput = useRef(); | |
| focusTextInput = () => textInput.current.focus(); | |
| return ( | |
| <> | |
| <input type="text" ref={textInput} /> |
yushanwebdev
/ router.jsx
Created
June 6, 2021 09:57
React Router code to persist the global components in all the pages
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const routes = [ | |
| { path: '/one', | |
| component: One | |
| }, | |
| { path: '/two', | |
| component: Two | |
| }, | |
| { path: '/three', | |
| component: Three | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * {box-sizing: border-box;} | |
| body { | |
| margin: 0; | |
| font-family: 'Montserrat', sans-serif; | |
| font-size: 1rem; | |
| color: #404040; | |
| line-height: 1.6; | |
| } |
yushanwebdev
/ fetch_post_data_not_added.js
Last active
September 28, 2021 05:15
JavaScript Fetch API post data not added to the Request body issue fixed by setting headers using `new Headers()`
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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
/ .gitignore-react
Created
January 29, 2023 07:43
.gitignore Template for React Projects
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | |
| # dependencies | |
| /node_modules | |
| /.pnp | |
| .pnp.js | |
| # testing | |
| /coverage |
yushanwebdev
/ env-thing.tsx
Last active
December 6, 2023 21:28
An alternative mechanism for making available the env variables in the client (Inspired by Kent's suggestion in the custom scripts lesson of the EpicWeb.dev)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
/ useFocusInvalid.ts
Last active
November 20, 2023 07:23
Hook to manage the focus of the form and its children when they are invalid. (Inspired by Kent's suggestion in the focus management lesson in the Epic Web second workshop.)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function useFocusInvalid( | |
| formRef: HTMLFormElement | null, | |
| hasErrors: boolean, | |
| ) { | |
| useEffect(() => { | |
| if (!formRef || !hasErrors) return | |
| if (formRef.matches('[aria-invalid="true"]')) { | |
| formRef.focus() | |
| } else { |