How to use the @fluentui/react-bindings.callable function in @fluentui/react-bindings

To help you get started, we’ve selected a few @fluentui/react-bindings examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github microsoft / fluent-ui-react / packages / react / src / utils / renderComponent.tsx View on Github external
renderer = null,
    rtl = false,
    theme = emptyTheme,
    telemetry = undefined as Telemetry,
    _internal_resolvedComponentVariables: resolvedComponentVariables = {},
  } = context || {}

  const startTime = telemetry && telemetry.enabled ? performance.now() : 0

  const ElementType = getElementType(props) as React.ReactType<p>
  const stateAndProps = { ...state, ...props }

  // Resolve variables for this component, cache the result in provider
  if (!resolvedComponentVariables[displayName]) {
    resolvedComponentVariables[displayName] =
      callable(theme.componentVariables[displayName])(theme.siteVariables) || {} // component variables must not be undefined/null (see mergeComponentVariables contract)
  }

  // Merge inline variables on top of cached variables
  const resolvedVariables = props.variables
    ? mergeComponentVariables(
        resolvedComponentVariables[displayName],
        withDebugId(props.variables, 'props.variables'),
      )(theme.siteVariables)
    : resolvedComponentVariables[displayName]

  const animationCSSProp = props.animation
    ? createAnimationStyles(props.animation, context.theme)
    : {}

  // Resolve styles using resolved variables, merge results, allow props.styles to override
  const mergedStyles: ComponentSlotStylesPrepared = mergeComponentStyles(</p>
github microsoft / fluent-ui-react / packages / react / src / components / Icon / Icon.tsx View on Github external
renderComponent({ ElementType, classes, unhandledProps, accessibility, theme, rtl, styles }) {
    const { name } = this.props
    const { icons = {} } = theme || {}

    const maybeIcon = icons[name]
    const isSvgIcon = maybeIcon &amp;&amp; maybeIcon.isSvg

    return (
      
        {isSvgIcon &amp;&amp; callable(maybeIcon.icon)({ classes, rtl, props: this.props })}
      
    )
  }
}

@fluentui/react-bindings

A set of components and hooks to build components libraries and UI kits.

MIT
Latest version published 11 months ago

Package Health Score

85 / 100
Full package analysis

Similar packages