Hide text for accessibility with React + Styled Components

I built this little component to hide text that isn't important when you have the whole screen visible for context, but for anyone using a screen reader that hidden content can be invaluable.

import styled from 'styled-components';

const Hide = styled.span.attrs({
    "aria-hidden": true
})`
    display: none;
`;

So if you have a Shop Now button, you can make that a lot more accessible.

Shop <Hide>our {category.name} collection</Hide> now