Skip to content

Instantly share code, notes, and snippets.

@smashercosmo
smashercosmo / check.ts
Created Jul 28, 2021
Check for smooth scrolling support
View check.ts
function testSupportsSmoothScroll() {
let supports = false
try {
const div = window.document.createElement('div')
div.scrollTo({
top: 0,
get behavior() {
supports = true
return 'smooth'
},
@smashercosmo
smashercosmo / Base.css
Last active Jun 11, 2021
Base components
View Base.css
.root {
--pl: initial;
--pr: initial;
--pt: initial;
--pb: initial;
--ml: initial;
--mr: initial;
--mt: initial;
--mb: initial;
--w: initial;
View useDragScroll.ts
import * as React from 'react'
import { useDrag } from 'react-use-gesture'
import { useSpring, config } from '@react-spring/web'
function clamp(min: number, val: number, max: number) {
return Math.min(Math.max(min, val), max)
}
const isServer = typeof window === 'undefined'
View Base.tsx
import React, { useContext } from 'react'
import cx from 'classnames'
import { ThemeContext } from '../ThemeContext/ThemeContext'
import type { Theme } from '../ThemeContext/ThemeContext'
import './Base.css'
type ResponsiveProperty<T> = T | { min?: T; max: T }
type MediaQueryProperty<T> = T | { xs?: T; sm?: T; md?: T; lg?: T; xl?: T }
View CreateOrganizationForm.tsx
import React from 'react'
import { useForm } from 'react-hook-form'
import { FormButtons } from '../../components/FormButtons/FormButtons'
import { TextFieldComponent } from '../../components/TextFieldComponent/TextFieldComponent'
import { Box } from '../../components/Box/Box'
import { getErrorsToShow } from '../../lib/formErrorsUtils'
type CreateOrganizationFormValues = {
name: string
View Clickable.tsx
import cx from 'classnames'
import React from 'react'
import { Link as ReactRouterLink } from 'react-router-dom'
import type { LinkProps as ReactRouterLinkProps } from 'react-router-dom'
import { ButtonSpinner } from '../ButtonSpinner/ButtonSpinner'
import styles from './Button.css'
type CommonProps = {
View Box.css
* {
--pl: initial;
--pr: initial;
--pt: initial;
--pb: initial;
--ml: initial;
--mr: initial;
--mt: initial;
--mb: initial;
--c: initial;
@smashercosmo
smashercosmo / Example.ts
Last active Jan 27, 2020
VerticalStackV2
View Example.ts
import React from 'react'
import { VerticalStack } from '../VerticalStack2/VerticalStack2'
export function App() {
return (
<VerticalStack gap={10} passthrough skipLast>
<h1>Hello world</h1>
<p>Bla bla bla</p>
<p>Bla bla bla</p>
View gist:31be5175144acfec3de12d39283dfce2
import React, { useEffect, useRef } from 'react'
import videoAV1 from '../../../static/video/video.av1.mp4'
import videoH264 from '../../../static/video/video.h264.mp4'
import styles from './VideoBackground.module.css'
function VideoBackground() {
const videoRef = useRef<HTMLVideoElement | null>(null)
const videoSrcAV1ref = useRef<HTMLSourceElement | null>(null)
View Box.tsx
import React from 'react'
type ResponsiveType<T> =
| T
| [T]
| [T, T]
| [T, T, T]
| [T, T, T, T]
| [T, T, T, T, T]
type SpacingType = 0 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50
type MarginSpacingType = SpacingType | 'auto'