mkhoussid

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

const radioButtons = 5;

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

mkhoussid

/////////////////////////////////////////////////////////////////////////////
// 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

///////////////////////////////////////////////////////////////////////////////////////////////////
// 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

// 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

// 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

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

// 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

// 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

const map = {
	0: 0,
	1: 1,
	2: 2,
	3: 3,
	4: 4,
	5: 5,
	6: 6,
	7: 7,
	8: 8,

mkhoussid

/*
  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';