viclafouch

import React, { useCallback, useLayoutEffect, useRef, useState } from 'react'
import PropTypes from 'prop-types'
import usePortal from '@viclafouch/usePortal'
import { Styled } from './tooltip.styled'
import styled from 'styled-components'

const Styled = styled.div`
  color: #ffffff;
  padding: 4px 8px;
  font-size: 1rem;

viclafouch

html[data-theme='dark'] {
  --text-color: #f0F0F0;
  --background-body: #1C1C1C;
  --other-var: #111111;
}

html[data-theme='light'] {
  --text-color: #111111;
  --background-body: #FAFAFA;
  --other-var: #ffffff;

viclafouch

// hooks/use-viewport.js
import { useState, useEffect } from 'react'

export const MOBILE = 'MOBILE'
export const TABLET = 'TABLET'
export const DESKTOP = 'DESKTOP'

const getDevice = width => {
  if (width < 768) return MOBILE
  else if (width < 992) return TABLET

viclafouch

// hooks/use-scroll.js
import { useEffect, useRef, useCallback, useState } from 'react'

function useScroll({ threshold = 450, isWindow = false, smooth = true } = {}) {
  const [isAtBottom, setIsAtBottom] = useState(false)
  const ref = useRef(isWindow ? window : null)

  const goTop = useCallback(() => {
    const element = ref.current
    element.scrollTo({