Other exports

Helpful functions and constants.

Let's take a quick look through some of the useful other exports in @tamagui/core.

Constants

Constants are re-exported from @tamagui/constants :

  • isWeb - process.env.TAMAGUI_TARGET === 'web'. Should be true both for SSR and Client side web targets.
  • isWindowDefined - typeof window === 'undefined'
  • isServer - isWeb && !isWindowDefined.
  • isClient - isWeb && isWindowDefined.
  • useIsomorphicLayoutEffect - isServer ? useEffect : useLayoutEffect. Helper for SSR rendering without warnings.
  • isChrome - client-side Chrome
  • isWebTouchable - web-only touch-device (client side only)
  • isTouchable - True for any touch device (client side only).
wwwwwwwwwwwwwwwwwww

Helpers

isTamaguiComponent

(component: any; name?: string) => boolean

If no name given, true if a Tamagui component, if name given ensures it's the specific named Tamagui component.

isTamaguiElement

(child: any; name?: string) => boolean

If no name given, true if a Tamagui ReactElement, if name given ensures it's the specific named Tamagui component element.

TamaguiComponent.extractable

Returned by the core components and any styled components, it's a higher order component that hints to the compiler that the wrapped component returns a single element - itself .

This will ensure isTamaguiElement is true for the wrapped component elements, and the compiler will do partial optimizations with prop extraction.

getTokens

;() => TokensParsed

Returns the parsed Tamagui config object of all your tokens, can be used at runtime to get values from tokens.

getSize

(size?: SizeTokens, shift = 0, bounds = [0]) => Variable<SizeToken> | undefined

Can be used to get the corresponding variable for a size, while also shift the size size up or down a step or more (bounded).

getExpandedShorthands

;(props: Object) => Object

Take props, returns new object with all shorthand props expanded.

themeable

themeable<Comp extends ReactComponentLike>(component: Comp): Comp

A higher order component  that accepts theme and themeInverse, rendering them onto Theme before rendering your component.

wwwwwwwwwwwwwwwwwww

Hooks

useEvent

A shim of the upcoming React hook .

useGet

useGet<A>(currentValue: A): () => A

Create a getter function that's always up to date with the given currentValue

useIsTouchDevice

SSR-friendly, only true on if native touchable or web touchable device (client side, not server side).

useDidFinishSSR

SSR-friendly, returns true if SSR has completed on the client, false before hydration done. On server it's always false.

useThemeName

Returns the string name of the current theme.

useSafeRef

A concurrent-mode safe ref, exactly the same as written in this article . Works the same as useRef, but returns the "old" current while concurrent mode hasn't committed effects.

useMediaPropsActive

Pass in props that include media styles, get back a flat object of styles with the current media styles merged. This is an advanced pattern that should be used sparingly, as it will trigger updates on every media query used. Helpful for more complex components that need to pass down props they are given to children (a common example being the size prop, if it's controlling children that also accept size).

// if props is:
// { size: '$2', $sm: { size: '$4' } }
// and $sm is active, activeProps will be:
// { size: '$4' }
function MyButton(props) {
const activeProps = useMediaPropsActive(props)
}