VueCraft NPM

React ​

Импортируйте из css-magic-gradient/react. React — опциональная peer-зависимость, основной бандл не затрагивается. Все хуки возвращают обычную string, мемоизированную через useMemo, и SSR-безопасны.

Пример ​

tsx
import { useState } from 'react'
import {
  useLinearGradient,
  useTetradicGradient,
  useTintGradient,
  useAccessibleGradient,
} from 'css-magic-gradient/react'

export function GradientShowcase() {
  const [color, setColor] = useState('#3498db')

  const linear = useLinearGradient(color, { direction: 'to right', offsetPercent: 20 })
  const tetradic = useTetradicGradient(color, { type: 'conic', steps: 24 })
  const tint = useTintGradient(color, 7)
  const accessible = useAccessibleGradient(color, '#ffffff', { targetLevel: 'AA' })

  return (
    <div>
      <input type="color" value={color} onChange={(e) => setColor(e.target.value)} />
      <div style={{ background: linear, height: 80, borderRadius: 8 }} />
      <div style={{ background: tetradic, height: 80, borderRadius: 8 }} />
      <div style={{ background: tint, height: 80, borderRadius: 8 }} />
      <div style={{ background: accessible, height: 80, borderRadius: 8 }} />
    </div>
  )
}

Хуки ​

useLinearGradient(first, options?) ​

string — линейный градиент из цвета или точек.

useMultiStepLinearGradient(color, steps?, options?) ​

string — многоступенчатый градиент яркости.

useMixedLinearGradient(colorA, colorB, steps?, options?) ​

string — двухцветный градиент с HSL-интерполяцией.

useRadialGradient(color, options?) ​

string — радиальный градиент.

useConicGradient(color, options?) ​

string — конический градиент.

useRainbowConicGradient(options?) ​

string — радуга на весь спектр, конический.

useComplementaryGradient(color, options?) ​

string — комплементарный гармонический градиент.

useTriadicGradient(color, options?) ​

string — триадный гармонический градиент.

useAnalogousGradient(color, options?) ​

string — аналоговый гармонический градиент.

useTetradicGradient(color, options?) ​

string — тетрадный гармонический градиент (linear/radial/conic).

useSplitComplementaryGradient(color, options?) ​

string — раздельно-комплементарный гармонический градиент.

useTintGradient(color, steps?, options?) ​

string — градиент оттенков (базовый → белый).

useShadeGradient(color, steps?, options?) ​

string — градиент теней (базовый → чёрный).

useToneGradient(color, steps?, options?) ​

string — градиент тонов (базовый → серый).

useAccessibleGradient(color, textColor, options?) ​

string — автоматически подстроенный WCAG-совместимый градиент.