bvaughn/react-highlight-words

Unable to add props to wrapper span

ioloie opened this issue · 4 comments

Is there an existing way to add standard DOM attributes to the span wrapper such as title or data-*? It could be as simple as spreading any remaining props to the child so we could do the following:

        <Highlighter
          className="gameName"
          highlightClassName="highlightName"
          searchWords={searchValue}
          textToHighlight={content.gameName}
          title="Play Game"
          data-ext="test"
        />

No, there's no way currently to do that.

I'm a little reluctant to spread remaining props that way, but...maybe that would be the least awkward approach for this use case.

If you'd be willing to put together a PR (including tests and documentation updates) I'll review it.

Would it be better to spread remaining props as above or to add a dedicated prop object:

const spanProps={
  title: 'Play Game',
  'data-ext': 'test'
}

return (<Highlighter
  className="gameName"
  highlightClassName="highlightName"
  searchWords={searchValue}
  textToHighlight={content.gameName}
  spanProps={spanProps}
/>)

I'm not thrilled with either approach, but I think I like the first approach better than the wrapper object.

Published as 0.16.0

Thanks for contributing!