React does not recognize the `partiallyActive` prop on a DOM element.

[vinicius98s]

Hello everyone, I'm using the AniLink to my pages transitions and on console I'm getting this error:

Warning: React does not recognize the `partiallyActive` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `partiallyactive` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
        in a (created by LocationProvider)
        in LocationProvider (created by Context.Consumer)
        in Location (created by Context.Consumer)
        in ForwardRef (created by GatsbyLink)
        in GatsbyLink (created by ForwardRef)
        in ForwardRef (at TransitionLink.js:28)
        in TransitionLink (at AniLink/index.js:23)
        in DefaultTransition (created by TransitionLink)
        in TransitionLink (created by Context.Consumer)
        in WithTheme(TransitionLink) (created by Context.Consumer)
        in div (created by Context.Consumer)
        in StyledComponent (created by styled.div)
        in styled.div (created by Context.Consumer)
        in div (created by Context.Consumer)
        in StyledComponent (created by styled.div)
        in styled.div (created by Card)
        in Card (created by Context.Consumer)
        in div (created by Context.Consumer)
        in StyledComponent (created by styled.div)
        in styled.div (created by Context.Consumer)
        in PostsPreview (created by Context.Consumer)
        in WithTheme(PostsPreview)
        in ThemeProvider

Is it safe to ignore? There is some way to remove this message from my console?

[TylerBarnes]

Hey @vinicius98s , glad to hear you're using the project! That looks like a styled components or emotionjs error actually. Essentially the prop "partiallyActive" is being passed through to the DOM element. React is warning that this isn't a valid DOM attribute. Are you creating a styled TransitionLink or AniLink?

[TylerBarnes]

I may need to handle this in this plugin now that I'm thinking about it a bit more. Can you copy paste the JSX from where you're adding AniLink?

[vinicius98s]

I may need to handle this in this plugin now that I'm thinking about it a bit more. Can you copy paste the JSX from where you're adding AniLink?

Sure! I'm using a component wrapping the AniLink because of some default props that I wanted to use:

import React from 'react';
import PropTypes from 'prop-types';
import AniLink from 'gatsby-plugin-transition-link/AniLink';
import { withTheme } from 'styled-components';

const TransitionLink = ({
  theme,
  color,
  direction,
  to,
  duration,
  children,
}) => (
  <AniLink
    cover
    duration={duration}
    bg={theme.colors[color]}
    direction={direction}
    to={to}
  >
    {children}
  </AniLink>
);

TransitionLink.defaultProps = {
  direction: 'right',
  duration: 0.8,
  color: 'main',
  to: '/',
};

TransitionLink.propTypes = {
  theme: PropTypes.object,
  direction: PropTypes.string,
  duration: PropTypes.number,
  to: PropTypes.string,
  color: PropTypes.string,
};

export default withTheme(TransitionLink);

[frazerf]

• 1 - I'm getting the same issue whilst using AniLink.

[TylerBarnes]

Thanks for bumping this @frazerf . I'll add this to my list of things to check out in the next couple weeks!