react#ComponentProps TypeScript Examples

The following examples show how to use react#ComponentProps. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: Data.tsx From plasmic with MIT License

6 votes

export function DynamicElement<
  Tag extends keyof JSX.IntrinsicElements = "div"
>({
  tag = "div",
  className,
  children,
  propSelectors,
  ...props
}: CommonDynamicProps & ComponentProps<Tag>) {
  const computed = _useSelectors(propSelectors);
  return createElement(tag, {
    children,
    ...props,
    ...computed,
    className: className + " " + computed.className,
  });
}

Example #2

Source File: CallDisplay.stories.tsx From useDApp with MIT License

6 votes

Template: Story<ComponentProps<typeof CallDisplay>> = (args) => (
  <NameTagsContext.Provider
    value={{
      nameTags: [],
      setNameTags: () => undefined,
      getNameTag: (a) => (a === ADDRESS_3 ? 'Uncle Joe' : undefined),
    }}
  >
    <GlobalStyle />
    <CallDisplay {...args} />
  </NameTagsContext.Provider>
)

Example #3

Source File: button.tsx From vital with MIT License

6 votes

Button = forwardRef<
  HTMLButtonElement,
  Omit<ComponentProps<"button">, "className">
>(({ children, ...rest }, ref) => {
  return (
    <button ref={ref} className={styles.button} {...rest}>
      {children}
    </button>
  );
})

Example #4

Source File: blog.tsx From portfolio with MIT License

6 votes

getStaticProps: GetStaticProps<{
  posts: ComponentProps<typeof ListLayout>['posts'];
  initialDisplayPosts: ComponentProps<typeof ListLayout>['initialDisplayPosts'];
  pagination: ComponentProps<typeof ListLayout>['pagination'];
}> = async () => {
  const posts = await getAllFilesFrontMatter('blog');
  const initialDisplayPosts = posts.slice(0, POSTS_PER_PAGE);
  const pagination = {
    currentPage: 1,
    totalPages: Math.ceil(posts.length / POSTS_PER_PAGE),
  };

  return { props: { initialDisplayPosts, posts, pagination } };
}

Example #5

Source File: ThemedSkeleton.tsx From mStable-apps with GNU Lesser General Public License v3.0

6 votes

ThemedSkeleton: FC<ComponentProps<typeof Skeleton> & { className?: string }> = props => {
  const isDarkTheme = useIsDarkMode()
  const theme = colorTheme(isDarkTheme)
  const { className } = props
  return (
    <div className={className}>
      <SkeletonTheme color={theme.background[2]} highlightColor={theme.background[0]}>
        <Skeleton {...props} />
      </SkeletonTheme>
    </div>
  )
}

Example #6

Source File: Filters.tsx From condo with MIT License

6 votes

getSelectFilterDropdown = (selectProps: ComponentProps<typeof Select>, containerStyles?: CSSProperties) => {
    return ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => {
        return (
            <SelectFilterContainer
                clearFilters={clearFilters}
                showClearButton={selectedKeys && selectedKeys.length > 0}
                style={containerStyles}
            >
                <Select
                    showArrow
                    style={DROPDOWN_SELECT_STYLE}
                    value={selectedKeys}
                    optionFilterProp={'label'}
                    onChange={(e) => {
                        setSelectedKeys(e)
                        confirm({ closeDropdown: false })
                    }}
                    {...selectProps}
                />
            </SelectFilterContainer>
        )
    }
}

Example #7

Source File: Filters.tsx From condo with MIT License

6 votes

getGQLSelectFilterDropdown = (
    props: ComponentProps<typeof GraphQlSearchInput>,
    search: (client: ApolloClient<Record<string, unknown>>, queryArguments: string) => Promise<Array<Record<string, unknown>>>,
    mode?: ComponentProps<typeof GraphQlSearchInput>['mode'],
    containerStyles?: CSSProperties
) => {
    return ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => {
        return (
            <SelectFilterContainer
                clearFilters={clearFilters}
                showClearButton={selectedKeys && selectedKeys.length > 0}
                style={containerStyles}
            >
                <GraphQlSearchInput
                    style={GRAPHQL_SEARCH_INPUT_STYLE}
                    search={search}
                    showArrow
                    mode={mode}
                    value={selectedKeys}
                    onChange={(e) => {
                        setSelectedKeys(e)
                        confirm({ closeDropdown: false })
                    }}
                    {...props}
                />
            </SelectFilterContainer>
        )
    }
}

Example #8

Source File: Filters.tsx From condo with MIT License

6 votes

getDateRangeFilterDropdown = (
    props: ComponentProps<typeof DateRangePicker>,
    containerStyles?: CSSProperties
) => {
    return ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => {
        const pickerProps = {
            value: undefined,
            onChange: e => {
                setSelectedKeys([e[0].toISOString(), e[1].toISOString()])
                confirm({ closeDropdown: false })
            },
            allowClear: false,
        }

        if (selectedKeys && selectedKeys.length > 0) {
            pickerProps.value = [dayjs(selectedKeys[0]), dayjs(selectedKeys[1])]
        }

        return (
            <FilterContainer clearFilters={clearFilters}
                showClearButton={selectedKeys && selectedKeys.length > 0}
                style={containerStyles}
            >
                <DateRangePicker {...pickerProps} {...props}/>
            </FilterContainer>
        )
    }
}

Example #9

Source File: MobileUserMenu.tsx From condo with MIT License

6 votes

modalStyle: ComponentProps<typeof Modal>['style'] = {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    pointerEvents: 'initial',
    top: 'initial',
    transformOrigin: 'initial',
    maxWidth: '100%',
}

Example #10

Source File: editor.tsx From bext with MIT License

6 votes

Editor: FC<ComponentProps<typeof MonacoEditor>> = (props) => {
  const theme = useBextTheme();

  const onMount = useCallback((_, monaco: Monaco) => {
    monaco.languages.typescript.javascriptDefaults.addExtraLib(
      LIB_UI_DTS,
      '@bext/ui.d.ts',
    );
    monaco.languages.typescript.javascriptDefaults.addExtraLib(
      LIB_UTIL_DTS,
      '@bext/util.d.ts',
    );
    monaco.languages.typescript.javascriptDefaults.addExtraLib(
      LIB_CONTEXT_DTS,
      '@bext/context.d.ts',
    );
  }, []);

  return (
    <MonacoEditor
      {...props}
      theme={theme === 'dark' ? 'vs-dark' : 'vs'}
      onMount={onMount}
    />
  );
}

Example #11