Temzasse

export function getTextWidth(text: string, element: HTMLElement): number {
  const canvas = document.createElement('canvas');

  const context = canvas.getContext('2d');
  if (!context) return 0;

  const fontWeight = getCssStyle(element, 'font-weight') || 'normal';
  const fontSize = getCssStyle(element, 'font-size') || '14px';
  const fontFamily = getCssStyle(element, 'font-family') || 'Times New Roman';
  const font = `${fontWeight} ${fontSize} ${fontFamily}`;

Temzasse

const properties = [
  'borderTopWidth',
  'borderRightWidth',
  'borderBottomWidth',
  'borderLeftWidth',
  'borderStyle',
  'boxSizing',
  'direction',
  'fontFamily',
  'fontSize',

Temzasse

export function useVirtualKeyboard() {
  const [isKeyboardOpen, setKeyboardOpen] = useState(false);
  const [keyboardHeight, setKeyboardHeight] = useState(0);

  useEffect(() => {
    const visualViewport = window.visualViewport;

    if (visualViewport) {
      const onResize = () => {
        const focusedElement = document.activeElement as HTMLElement | null;

Temzasse

import { useMemo } from "react";
import { useSearchParams } from "react-router-dom";

type ParseConfig = Record<
  string,
  | { type: "string"; defaultValue?: string }
  | { type: "number"; defaultValue?: number }
  | { parse: (value: URLSearchParams) => unknown }
>;

Temzasse

import React from 'react';
import Tabs from './Tabs';

const TabsExample = () => (
  <Tabs>
    <Tabs.Panel label='Tab label 1'>
      <h4>Tab content 1</h4>
      <p>
        Disrupt minimum viable product pivot waterfall is so 2000 and
        late viral long shadow cortado SpaceTeam unicorn venture

Temzasse

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import withRipple from './withRipple';

const TabContent = styled.div`
  flex: 1;
  width: 100%;
`;

Temzasse

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled, { keyframes } from 'styled-components';
import { darken } from 'polished';

import TextField from './TextField';

const propTypes = {
  onAuthSuccess: PropTypes.func.isRequired,
};

Temzasse

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { darken } from 'polished';

const propTypes = {
  label: PropTypes.string,
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
};

Temzasse

const propTypes = {
  label: PropTypes.string,
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
};

class TextField extends Component {
  state = {
    isFocused: false,
  }

Temzasse

.toastAnimEnter, .toastAnimAppear {
  opacity: 0.01;
  transition: opacity .5s cubic-bezier(.03, .83, .76, .98);
}

.toastAnimEnter.toastAnimEnterActive, .toastAnimAppear.toastAnimAppearActive {
  opacity: 1;
}

.toastAnimLeave {