useCssSupports

Category

Browser

Export Size

282 B

Last Changed

5 days ago

SSR compatible and reactive CSS.supports

Demo

Usage

import { useCssSupports } from '@reause/core'

const { isSupported } = useCssSupports('container-type', 'scroll-state')

Both the single-argument condition-text form and the property + value form are supported, and every input accepts a string or a React ref:

import { useCssSupports } from '@reause/core'
import { useState } from 'react'

const [property, setProperty] = useState('display')
const [value, setValue] = useState('flex')
const { isSupported: propValueSupported } = useCssSupports(property, value)

const condition = { current: 'selector(:has(a))' }
const { isSupported: conditionSupported } = useCssSupports(condition)

Server Side Rendering

During SSR and before the mount effect runs, the result is options.ssrValue (default false), so the server-rendered HTML matches the pre-hydration client render:

const { isSupported } = useCssSupports('display: flex', { ssrValue: false })

Type Declarations

export interface UseCssSupportsOptions extends ConfigurableWindow {
    ssrValue?: boolean;
}

export interface UseCssSupportsReturn {
    isSupported: boolean;
}

export function useCssSupports(property: string, value: string, options?: UseCssSupportsOptions): UseCssSupportsReturn

export function useCssSupports(conditionText: string, options?: UseCssSupportsOptions): UseCssSupportsReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

e608a - feat(ci): align CI, packaging and release with VueUse

4833c - fix(core): resolve useCssSupports audit findings (#535)

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)