search

helior / react-highlighter

:high_brightness: Highlight text using React
MIT License
157 stars 42 forks source link

[PropTypes] Allow React components for matchElement #55

Closed kachkaev closed 6 years ago

kachkaev commented 6 years ago

Hi @helior and many thanks for your library! With react-highlighter I got from zero to all done in just 10 minutes, which is mind-blowing even in the React world!

I'm writing to share a minor issue I've faced when using <Highlight /> together with styled-components. Here's my code:

import styled from "styled-components";

const HighlightMark = styled.span`
  background: rgba(255, 255, 0, 0.3);
  border-radius: 4px;
  display: inline-block;
  margin: auto -3px;
  padding: 0 3px;
`;

// ... 

<Highlight search={highlightRegexp || false} matchElement={HighlightMark}>
  {text}
</Highlight>

This produces a warning in development environment:

Warning: Failed prop type: Invalid prop `matchElement` of type `function` supplied to `Highlighter`, expected `string`.

It'd be great if matchElement in PropTypes allowed using custom react components in addition to strings. The issue is only with the warning – all working great apart from that 🎉

kachkaev commented 6 years ago

@helior would you be happy to release a new patch version if I submit a PR?

helior commented 6 years ago

Hi @kachkaev, I'm glad to hear you were up in running so quickly 👍 . This is a great idea to define components for the matching element. If you have a PR, I would be happy to release a version with the new feature.

kachkaev commented 6 years ago

Here you go: #56 🙌

Looking forward for a new patch release (I don't think we are adding a feature) 😉