How to use the @uifabric/react-hooks.useConst function in @uifabric/react-hooks

To help you get started, we’ve selected a few @uifabric/react-hooks 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 OfficeDev / office-ui-fabric-react / packages / office-ui-fabric-react / src / components / FocusZone / examples / FocusZone.List.Example.tsx View on Github external
export const FocusZoneListExample: React.FunctionComponent = () => {
  //  Initialize the selection when the component is first rendered (same instance will be reused)
  const selection = useConst(() => {
    const sel = new Selection();
    sel.setItems(ITEMS);
    return sel;
  });

  return (
    
      {ITEMS.map((item, index) => (
github OfficeDev / office-ui-fabric-react / packages / example-app-base / src / components / ApiReferencesTable / ApiReferencesTable.tsx View on Github external
const ApiDetailsList: React.FunctionComponent = React.memo(props => {
  // Alphabetize the items and add a key to each one.
  const { itemKind, items } = props;
  const processedItems: IApiEnumProperty[] | IApiInterfaceProperty[] | IMethod[] = useConst(() => {
    if (itemKind === 'enum') {
      return (items as IApiEnumProperty[])
        .sort((a, b) => (a.value < b.value ? -1 : a.value > b.value ? 1 : 0))
        .map(item => ({ ...item, key: item.name }));
    }
    return (items as IApiInterfaceProperty[] | IMethod[])
      .sort((a, b) => {
        // Ensure anything required comes first if handling props.
        if (itemKind === 'property' && !!a.required !== !!b.required) {
          return a.required ? -1 : 1;
        }
        // Ensure the constructor is first if handling methods.
        if (itemKind === 'method' && a.name === 'constructor') {
          return -1;
        }
        return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
github OfficeDev / office-ui-fabric-react / packages / example-app-base / src / components / ApiReferencesTable / ApiReferencesTable.tsx View on Github external
return (items as IApiInterfaceProperty[] | IMethod[])
      .sort((a, b) => {
        // Ensure anything required comes first if handling props.
        if (itemKind === 'property' && !!a.required !== !!b.required) {
          return a.required ? -1 : 1;
        }
        // Ensure the constructor is first if handling methods.
        if (itemKind === 'method' && a.name === 'constructor') {
          return -1;
        }
        return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
      })
      .map(item => ({ ...item, key: item.name }));
  });

  const columns = useConst(() => _getColumns(props));

  return (
    
  );
});
github OfficeDev / office-ui-fabric-react / packages / office-ui-fabric-react / src / components / FocusZone / examples / FocusZone.Photos.Example.tsx View on Github external
export const FocusZonePhotosExample: React.FunctionComponent = () => {
  //  Initialize the items when the component is first rendered (same array will be reused)
  const items = useConst(_getItems);
  return (
    
      {items.map((item: IPhoto, index: number) => (
        <li data-is-focusable="{true}" aria-label="Photo" aria-setsize="{items.length}" aria-posinset="{index">
          <img placeholder="" by="" alt="{`${item.width}" height="{item.height}" width="{item.width}" src="{item.url}">
        </li>
      ))}
    
  );

@uifabric/react-hooks

Fluent UI React hooks.

MIT
Latest version published 2 years ago

Package Health Score

75 / 100
Full package analysis