Skip to content

Instantly share code, notes, and snippets.

View yushanwebdev's full-sized avatar
🇱🇰
Sri Lankan Coder

Yushan Fernando yushanwebdev

🇱🇰
Sri Lankan Coder
16 followers · 8 following
View GitHub Profile
@yushanwebdev
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.)
export function useFocusInvalid(
formRef: HTMLFormElement | null,
hasErrors: boolean,
) {
useEffect(() => {
if (!formRef || !hasErrors) return
if (formRef.matches('[aria-invalid="true"]')) {
formRef.focus()
} else {
@yushanwebdev
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)
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
yushanwebdev / .gitignore-react
Created January 29, 2023 07:43
.gitignore Template for React Projects
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
@yushanwebdev
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()`
// 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
yushanwebdev / _normalize.css
Created August 28, 2021 09:59
Extra Normalize CSS
* {box-sizing: border-box;}
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
color: #404040;
line-height: 1.6;
}
@yushanwebdev
yushanwebdev / router.jsx
Created June 6, 2021 09:57
React Router code to persist the global components in all the pages
const routes = [
{ path: '/one',
component: One
},
{ path: '/two',
component: Two
},
{ path: '/three',
component: Three
}
@yushanwebdev
yushanwebdev / ref-functional-component.js
Created May 31, 2021 04:34 — forked from cecigarcia/ref-functional-component.js
import React, { useRef } from "react";
const CustomTextInput = () => {
const textInput = useRef();
focusTextInput = () => textInput.current.focus();
return (
<>
<input type="text" ref={textInput} />
@yushanwebdev
yushanwebdev / ref-class-component.js
Created May 31, 2021 04:32 — forked from cecigarcia/ref-class-component.js
import React, { Component, createRef } from "react";
class CustomTextInput extends Component {
textInput = createRef();
focusTextInput = () => this.textInput.current.focus();
render() {
return (
<>