VueCraft NPM

Интеграция с Vue и React ​

Интеграция с Vue 3 ​

Все хуки возвращают ComputedRef<string>, реагирующий на входные Ref<>. Все хуки SSR-безопасны — доступ к DOM во время вычисления не происходит.

Настройка ​

ts
// main.ts
import { createApp } from 'vue'
import { VueGradientPlugin } from 'css-magic-gradient'
import App from './App.vue'

createApp(App).use(VueGradientPlugin).mount('#app')

Пример ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import {
  useLinearGradient,
  useMixedLinearGradient,
  useConicGradient,
  useTetradicGradient,
  useTintGradient,
  useAccessibleGradient,
} from 'css-magic-gradient'

const color = ref('#3498db')

const linear = useLinearGradient(color, { direction: 'to right', offsetPercent: 20 })
const mixed = useMixedLinearGradient(color, ref('#e74c3c'), 7)
const conic = useConicGradient(color, { hueRotation: true, steps: 12 })
const tetradic = useTetradicGradient(color, { type: 'conic', steps: 24 })
const tint = useTintGradient(color, 7)
const accessible = useAccessibleGradient(color, ref('#ffffff'), { targetLevel: 'AA' })
</script>

<template>
  <div :style="{ background: linear }">Linear</div>
  <div :style="{ background: tetradic }">Tetradic conic</div>
  <div :style="{ background: tint }">Tint</div>
  <div :style="{ background: accessible }">Accessible</div>
</template>

Хуки Vue ​

ХукВозвращаетОписание
useLinearGradient(first, options?)ComputedRef<string>Линейный градиент из цвета или точек
useMultiStepLinearGradient(color, steps?, options?)ComputedRef<string>Многоступенчатый градиент яркости
useMixedLinearGradient(colorA, colorB, steps?, options?)ComputedRef<string>Двухцветный градиент с HSL-интерполяцией
useRadialGradient(color, options?)ComputedRef<string>Радиальный градиент
useConicGradient(color, options?)ComputedRef<string>Конический градиент
useRainbowConicGradient(options?)ComputedRef<string>Радуга на весь спектр, конический
useComplementaryGradient(color, options?)ComputedRef<string>Комплементарный гармонический градиент
useTriadicGradient(color, options?)ComputedRef<string>Триадный гармонический градиент
useAnalogousGradient(color, options?)ComputedRef<string>Аналоговый гармонический градиент
useTetradicGradient(color, options?)ComputedRef<string>Тетрадный гармонический градиент (linear/radial/conic)
useSplitComplementaryGradient(color, options?)ComputedRef<string>Раздельно-комплементарный гармонический градиент
useTintGradient(color, steps?, options?)ComputedRef<string>Градиент оттенков (базовый → белый)
useShadeGradient(color, steps?, options?)ComputedRef<string>Градиент теней (базовый → чёрный)
useToneGradient(color, steps?, options?)ComputedRef<string>Градиент тонов (базовый → серый)
useAccessibleGradient(color, textColor, options?)ComputedRef<string>Автоматически подстроенный WCAG-совместимый градиент

Глобальные свойства (после установки VueGradientPlugin) ​

ts
this.$useLinearGradient(color, options)
this.$useTetradicGradient(color, options)
this.$useTintGradient(color, steps, options)
this.$useAccessibleGradient(color, textColor, options)
// … все хуки доступны как $use* на инстансе Vue

Интеграция с 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>
  )
}

Хуки React ​

ХукВозвращаетОписание
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-совместимый градиент