Documentation

Link-wrapper

Link-wrapper is used by Card-link to be able to use the power of Next/link

In short, it receives a href and a passHref according to Next/Link and passes it on to a React forwardRef.

Code examples

This is an example of the implementation in card-link component.

// Import LinkWrapper component
  import LinkWrapper from '@components/content/link-wrapper';

// Use case from card-link
  <LinkWrapper href={href} passHref>
    <a className={reducedMotion ? styles.wrapperReduced : styles.wrapper} ref={cardRef} target={target ? '_blank' : null}>
      <Paper className='js-card elevation-auto-raise' style={{ overflow: 'hidden' }}>
        {image
          ? <Image
            src={image}
            alt={alt}
            sizes={sizes}
            transparent={transparent}
            noAnimation
          />
          : <Fallback
            alt={alt}
            sizes={sizes}
            transparent={transparent}
            noAnimation
          />
        }
        <div className={styles.content}>
          <Typography className={styles.title} component={component} variant={variant} noMargin noAnchor>{title}</Typography>
          {subtitle ? <Typography component='p' noMargin className={styles.subtitle}>{subtitle}</Typography> : null}
        </div>
      </Paper>
    </a>
  </LinkWrapper >

Props table

Prop name	Type	Default Value	Description
refAs	ref		Ref to be used
children			Children