Skip to main content

Hooks

useColorModeValue​

useColorModeValue is a custom hook inspired by NativeBase that can retrieve a value from parameters passed based on the active color mode (light/dark). SpiroKit also adds a third optional parameter that allows you to override the global color mode for a specific scenario.

useColorModeValue(light: any, dark: any, colorMode?: ColorMode): any
import { useColorModeValue } from "@spirokit/ui"

const App = () => {
  const cardBackgroundColor = useColorModeValue("white", "black")
  
  return (
    <Box backgroundColor={cardBackgroundColor}>
      <Title>Card title</Title>
    </Box>
  )
}

useDisclose​

useDisclose is a custom hook inspired by NativeBase that handles common open, close, or toggle scenarios and can control feedback component such as Modal, Alert, etc.

useDisclose(): { 
  isOpen: boolean, 
  onOpen: () => void,
  onClose: () => void,
  onToggle: () => void
}
import { useDisclose, Button, Alert, TitleOne } from "@spirokit/ui"

const App = () => {
  const { isOpen, onOpen, onClose, onToggle } = useColorMode()
  
  return (
    <VStack space={4}>
      <Button onPress={() => onOpen()>Open Modal</Button>
      <Alert 
        isVisible={isOpen}
        onClose={onClose}
        TitleComponent={<TitleOne>Alert title</TitleOne>}
        ConfirmButtonComponent={<Button onPress={() => onClose()}>Confirm</Button>}>
      </Alert>
    </VStack>
  )
}

usePoppins​

usePoppins is a custom SpiroKit hook that allows you to quickly load the Poppins typeface on your app.

import { usePoppins } from "@spirokit/native"

const App = () => {
  const fontLoaded = usePoppins()
  
  if(!fontLoaded) return <Body>Loading...</Body>
  
  return (
    <Body>App loaded with Poppins font</Body>
  )
}

useTheme​

useTheme is a custom hook that allows you to access the theme object from the global context.

You can also use this hook to retrieve and update the current color mode and accent color.

import { useTheme, Body } from "@spirokit/ui"

const App = () => {
  const { theme, colorMode, setColorMode, accentColor, setAccentColor } = useTheme()
  
  return (
    <Body>Hex value for "primary.300" color: {theme.color300.val}</Body>
  )
}
import { useTheme, Body } from "@spirokit/ui"

const App = () => {
  const { colorMode, accentColor } = useTheme()
  const bgColor = useColorModeValue("white", "black", colorMode)
  
  return (
    <Box backgroundColor={bgColor}></Box>
  )
}

useColorWithOpacity​

Custom hook that allows you to pass an hexa color and a opacity value and returns the new color in RGBA format.

import { useColorWithOpacity, Body } from "@spirokit/ui"

const App = () => {
  const transparentRed = useColorWithOpacity("#FF0000", 0.5)
  
  return (
    <Box backgroundColor={transparentRed}></Box>
  )
}