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

fix: forward refs to <PrismicLink> components #131

Merged
merged 3 commits into from
Mar 3, 2022

Conversation

angeloashmore
Copy link
Member

@angeloashmore angeloashmore commented Mar 3, 2022

Types of changes

  • Chore (a non-breaking change which is related to package maintenance)
  • Bug fix (a non-breaking change which fixes an issue)
  • New feature (a non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Description

This PR adds support for forwarding refs to <PrismicLink> components. Before this PR, refs were ignored, meaning there was no way to target the rendered element.

In the following example, ref will contain a reference to the rendered <a> element.

const Page = ({ document }) => {
  const ref = useRef(null);

  return (
    <PrismicLink ref={ref} field={document.data.link}>
      Click me!
    </PrismicLink>
  );
};

If a custom component is provided, the ref will be passed to the component. The custom component must handle the ref forwarding itself.

const CustomComponent = React.forwardRef(({ href, children }, ref) => {
  return <span ref={ref}>{children}</span>;
});

const Page = ({ document }) => {
  const ref = useRef(null);

  return (
    <PrismicLink
      ref={ref}
      field={document.data.link}
      internalComponent={CustomComponent}
    >
      Click me!
    </PrismicLink>
  );
};

This works for both internal and external components. If you are using TypeScript, note that this means the ref must be typed for both the rendered internal and external components.

Fixes #128

Checklist:

  • My change requires an update to the official documentation.
  • All TSDoc comments are up-to-date and new ones have been added where necessary.
  • All new and existing tests are passing.

🐡

@github-actions
Copy link

github-actions bot commented Mar 3, 2022

size-limit report 📦

Path Size
dist/index.js 4.42 KB (+0.79% 🔺)
dist/index.cjs 6.3 KB (+0.5% 🔺)

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.

React.forwardRef on <PrismicLink>
1 participant