How to use the @rmwc/base.useFoundation function in @rmwc/base

To help you get started, we’ve selected a few @rmwc/base 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 jamesmfriedman / rmwc / src / chip / foundation.tsx View on Github external
export const useChipFoundation = (props: ChipProps & React.HTMLProps) => {
  const chipId = useId('chip', props);

  const foundationWithElements = useFoundation({
    props,
    elements: {
      rootEl: true,
      trailingIconEl: true,
      checkmarkEl: true
    },
    foundation: ({ rootEl, checkmarkEl, emit, getProps }) =>
      new MDCChipFoundation({
        addClass: className => {
          rootEl.addClass(className);
        },
        removeClass: className => rootEl.removeClass(className),
        hasClass: className => rootEl.hasClass(className),
        addClassToLeadingIcon: className => {
          // handled by props
        },
github jamesmfriedman / rmwc / src / snackbar / foundation.tsx View on Github external
export function useSnackbarFoundation(
  props: SnackbarProps & Omit, 'action'>
) {
  const { foundation, ...elements } = useFoundation({
    props,
    elements: {
      rootEl: true,
      surfaceEl: true,
      labelEl: true
    },
    foundation: ({ rootEl, labelEl, emit }) => {
      return new MDCSnackbarFoundation({
        addClass: (className: string) => rootEl.addClass(className),
        removeClass: (className: string) => rootEl.removeClass(className),
        announce: () => labelEl.ref && util.announce(labelEl.ref),
        notifyOpening: () => emit('onOpen', {}),
        notifyOpened: () => emit('onOpened', {}),
        notifyClosing: (reason: string) => {
          emit('onClose', reason ? { reason } : {});
        },