Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added forwardRef around PictureCard so it can be used with useRef #976

Merged
merged 2 commits into from
Feb 23, 2024

Conversation

omsaggau
Copy link
Contributor

No description provided.

Copy link
Contributor

@Carl-OW Carl-OW left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good 🌞

@omsaggau
Copy link
Contributor Author

Ref

<a
	className={`ssb-picture-card ${orientation} ${className || ''}`}
	href={link}
	onClick={onClick}
	ref={element => {
		// Using ref for multiple purposes, so need to set it manually
		if (typeof ref === 'function') ref(element);
		// eslint-disable-next-line no-param-reassign
		else if (ref) { ref.current = element; }
		hoverRef.current = element;
	}}
>

The ref is set in this way so it can be both used by a parent component with useRef and the internal hoverRef hook.
The if (typeof ref === 'function') is used so a parent can use the two commonly used syntaxed for setting refs

Both of these will now work:
<PictureCard ref={(element) => (cards.current[index] = element)}
` <PictureCard ref={myRef}``
The first example is the most used way to set refs on components in .map functions.

@omsaggau omsaggau merged commit 0a3291b into master Feb 23, 2024
3 checks passed
@omsaggau omsaggau deleted the MIM-340_ref-picturecard branch February 23, 2024 11:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants