mkhoussid’s gists

mkhoussid / gist:d6cb58fb9eba048212329c1d090cebf4

Created June 26, 2024 12:11

useSearchParams (adapted from react-router/-dom)

	/*
	I wanted to update and listen to search param changes without installing any more libraries than neccessary.
	So, instead of installing `react-router-dom` just for its `useSearchParams` hook, I plucked some of their code.

	Their `useSearchParams` hook used `useNavigate` to update the url, and `LocationContext` wraps
	their `Routes` component, so I omitted those two as well
	*/

	import * as React from 'react';
	import { SetSearchParams, SearchParamsChange } from 'interfaces/SearchParams';

mkhoussid / unicodeToWin1251.js

Last active September 28, 2021 16:00

unicodeToWin1251 function

mkhoussid / useNetworkInfo.tsx

Last active December 9, 2020 09:35

useNetworkInfo hook written in Typescript

	// adapted from here: https://googlechrome.github.io/samples/network-information/

	import React from 'react';

	type TNetworkInfo = {
	type: string;
	downlink: string;
	rtt: string;
	downlinkMax: string;
	effectiveType: string;

mkhoussid / useComponentWillMount.ts

Created November 16, 2020 08:45

useComponentWillMount ReactJS hook

	// NOTE: This does NOT work on NextJS: https://github.com/vercel/next.js/discussions/19204
	// Adapted from here: https://stackoverflow.com/questions/53464595/how-to-use-componentwillmount-in-react-hooks#comment101488609_56818036

	const useComponentWillMount = (func: (...params: any[]) => any): void => {
	const willMount = useRef(true);

	useEffect(() => {
	// invert flag to ensure `func` does not run twice after mount
	willMount.current = false;
	}, []);

mkhoussid / hexToRgba.ts

Last active November 16, 2020 08:39

Convert Hex color to RGBA format

	export const hexToRgba = (rgbaColor: string, opacity: number): string =>
	`rgba(${parseInt(rgbaColor.substring(1, 3), 16)}, ${parseInt(rgbaColor.substring(3, 5), 16)}, ${parseInt(
	rgbaColor.substring(5, 7),
	16,
	)}, ${opacity})`;

	// example usage:
	// hexToRgba(#FFFFFF, 0.5) -> 'rgba(255, 255, 255, 0.5)'

mkhoussid / usePreloadImages.ts

Created November 16, 2020 08:22

usePreloadImages hook (download images in the background after DOM has rendered)

	// This preloads images AFTER DOM has loaded
	// See PreloadedImages.tsx for loading images before DOM is ready (https://gist.github.com/mkhoussid/d6a1a7b3d029c42bbcb45bdc929602c8)

	import React from 'react';

	export default function usePreloadImages(imageUrls: string[]): void {
	React.useEffect(() => {
	imageUrls.forEach((imageUrl) => {
	const image = new Image();
	image.src = imageUrl;

mkhoussid / PreloadImages.tsx

Created November 16, 2020 08:22

PreloadImages component (download images before DOM has loaded)

	// This preloads images BEFORE DOM has loaded
	// See usePreloadImages.ts for loading images after DOM has loaded (https://gist.github.com/mkhoussid/c960ba200d6ef9142b80769a7c84e5f1)

	import React from 'react';

	type TPreloadImages = {
	imageUrls: string[];
	};
	export default React.memo(({ imageUrls }: TPreloadImages) => {
	return (

mkhoussid / PhoneInput.tsx

Created November 16, 2020 07:09

Country input + phone number format (using i18n-iso-countries and libphonenumber-js)

	///////////////////////////////////////////////////////////////////////////////////////////////////
	// https://codesandbox.io/s/hopeful-williams-ntsqk?file=/src/components/PhoneInput/index.tsx:0-2307
	///////////////////////////////////////////////////////////////////////////////////////////////////

	import React from "react";
	import { Input, Select, Button } from "antd";
	import countries, { getNames } from "i18n-iso-countries";
	import {
	AsYouType,
	getCountryCallingCode,

mkhoussid / App.tsx

Last active November 16, 2020 07:10

ThemeProvider with useContext

	/////////////////////////////////////////////////////////////////////////////
	// https://codesandbox.io/s/inspiring-thunder-dzyi8?file=/src/index.tsx:0-274
	/////////////////////////////////////////////////////////////////////////////


	import * as React from "react";
	import { Button } from "components/ui";
	import { ThemeContext } from "contexts/ThemeContext";
	import { themes } from "utils/theme";
	import { Container, Label, RadioInputStyled } from "components/styled/App";

mkhoussid / App.ts

Created November 7, 2020 08:54

[Reactjs] Material UI (useStyles / makeStyles) and Styled Components, access style attributes of elements (Codesandbox link included)

	import React from "react";
	import StyledComponentsRadios from "./StyledComponentsRadios";
	import MuiRadios from "./MuiRadios";

	const radioButtons = 5;

	export default function App() {
	return (
	<>
	<StyledComponentsRadios radioButtons={radioButtons} />