abonello

{"lastUpload":"2019-07-31T07:59:18.647Z","extensionVersion":"v3.4.1"}

abonello

input[type='text']

      // Chrome/Opera/Safari

      &::-webkit-input-placeholder

          white-space: pre-line

          position: relative

abonello

import {MutableRefObject, useEffect, useState} from 'react';

const toRect = (rect: DOMRect | undefined) => {
    const width = rect?.width || 0,
        height = rect?.height || 0,
        x = rect?.x || 0,
        y = rect?.y || 0;
    return {width, height, x, y};
};

abonello

import {useCallback, useState} from 'react';

const useToggle = (init: boolean = false): [boolean, (v: unknown) => void] => {
  const [toggle, setToggle] = useState(init);
  const callback = useCallback((value) => {
    setToggle((prev) => (typeof value === 'boolean' ? value : !prev));
  }, []);
  return [toggle, callback];
};

abonello

import {useEffect, useRef} from 'react';

export function usePrevious(value) {
    const ref = useRef(value);

    useEffect(() => {
        ref.current = value;
    }, [value]);

    return ref.current;

abonello

import {useEffect, useState} from 'react';

const useGotQuote = () => {
    const [quote, setQuote] = useState('');
    useEffect(() => {
        fetch('https://game-of-thrones-quotes.herokuapp.com/v1/random')
            .then((response) => response.json())
            .then((data) => setQuote(data?.sentence));
    }, []);
    return quote;

abonello

import {useMemo } from 'react';

const CODE: Record<string, string> = {
  IN: 'INR',
  SE: 'SEK',
  GB: 'GBP',
  IE: 'EUR',
  CN: 'CNY',
  JP: 'JPY',
  US: 'USD',

abonello

import {useEffect, useState} from 'react';

const useGeoLocation = (options?: PositionOptions) => {
    const [geo, setGeo] = useState<GeolocationPosition>();
    const [err, setError] = useState<GeolocationPositionError>();
    useEffect(() => {
        const id = navigator.geolocation.watchPosition(
            (pos) => {
                setGeo(pos);
                err && setError(undefined);

abonello

import {useEffect, useMemo} from 'react';

export const useAudio = (
    src: string,
    play: boolean,
    volume: number,
    loop: boolean,
    onDone?: () => void
) => {
    const audio = useMemo(() => {

abonello

import {ButtonHTMLAttributes, forwardRef} from 'react';

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    primary?: boolean;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
    ({className, primary, children, ...props}, ref) => {
        return (
            <button