Documentation
Link-wrapperLink-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} rel={target ? 'noopener noreferrer' : 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}>
<h3 className={styles.title}>{title}</h3>
{subtitle ? <p className={styles.subtitle}>{subtitle}</p> : null}
</div>
</Paper>
</a>
</LinkWrapper >Props table
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| refAs | ref | Ref to be used | |
| children | Children |