Comments (6)
Yup, I think using the DefinitelyTyped definitions would be the way to go:
https://www.npmjs.com/package/@types/react-highlight-words
from react-highlight-words.
Oh, and maybe the following info will be useful. If I do an import like so:
import * as Highlighter from "react-highlight-words";
Then if I print Highlighter to the console, this is what I get:
function Highlighter(_ref) {
var _ref$activeClassName = _ref.activeClassName;
var activeClassName = _ref$activeClassName === undefined ? '' : _ref$activeClassName;
var _ref$activeIndex = _ref.activeIndex;
var activeIndex = _ref$activeIndex === undefined ? -1 : _ref$activeIndex;
var activeStyle = _ref.activeStyle;
var autoEscape = _ref.autoEscape;
var _ref$caseSensitive = _ref.caseSensitive;
var caseSensitive = _ref$caseSensitive === undefined ? false : _ref$caseSensitive;
var className = _ref.className;
var findChunks = _ref.findChunks;
var _ref$highlightClassName = _ref.highlightClassName;
var highlightClassName = _ref$highlightClassName === undefined ? '' : _ref$highlightClassName;
var _ref$highlightStyle = _ref.highlightStyle;
var highlightStyle = _ref$highlightStyle === undefined ? {} : _ref$highlightStyle;
var _ref$highlightTag = _ref.highlightTag;
var highlightTag = _ref$highlightTag === undefined ? 'mark' : _ref$highlightTag;
var sanitize = _ref.sanitize;
var searchWords = _ref.searchWords;
var textToHighlight = _ref.textToHighlight;
var _ref$unhighlightClassName = _ref.unhighlightClassName;
var unhighlightClassName = _ref$unhighlightClassName === undefined ? '' : _ref$unhighlightClassName;
var unhighlightStyle = _ref.unhighlightStyle;
var rest = _objectWithoutProperties(_ref, ['activeClassName', 'activeIndex', 'activeStyle', 'autoEscape', 'caseSensitive', 'className', 'findChunks', 'highlightClassName', 'highlightStyle', 'highlightTag', 'sanitize', 'searchWords', 'textToHighlight', 'unhighlightClassName', 'unhighlightStyle']);
var chunks = (0, _highlightWordsCore.findAll)({
autoEscape: autoEscape,
caseSensitive: caseSensitive,
findChunks: findChunks,
sanitize: sanitize,
searchWords: searchWords,
textToHighlight: textToHighlight
});
var HighlightTag = highlightTag;
var highlightIndex = -1;
var highlightClassNames = '';
var highlightStyles = undefined;
var lowercaseProps = function lowercaseProps(object) {
var mapped = {};
for (var key in object) {
mapped[key.toLowerCase()] = object[key];
}
return mapped;
};
var memoizedLowercaseProps = (0, _memoizeOne2['default'])(lowercaseProps);
return (0, _react.createElement)('span', _extends({
className: className
}, rest, {
children: chunks.map(function (chunk, index) {
var text = textToHighlight.substr(chunk.start, chunk.end - chunk.start);
if (chunk.highlight) {
highlightIndex++;
var highlightClass = undefined;
if (typeof highlightClassName === 'object') {
if (!caseSensitive) {
highlightClassName = memoizedLowercaseProps(highlightClassName);
highlightClass = highlightClassName[text.toLowerCase()];
} else {
highlightClass = highlightClassName[text];
}
} else {
highlightClass = highlightClassName;
}
var isActive = highlightIndex === +activeIndex;
highlightClassNames = highlightClass + ' ' + (isActive ? activeClassName : '');
highlightStyles = isActive === true && activeStyle != null ? Object.assign({}, highlightStyle, activeStyle) : highlightStyle;
var props = {
children: text,
className: highlightClassNames,
key: index,
style: highlightStyles
};
// Don't attach arbitrary props to DOM elements; this triggers React DEV warnings (https://fb.me/react-unknown-prop)
// Only pass through the highlightIndex attribute for custom components.
if (typeof HighlightTag !== 'string') {
props.highlightIndex = highlightIndex;
}
return (0, _react.createElement)(HighlightTag, props);
} else {
return (0, _react.createElement)('span', {
children: text,
className: unhighlightClassName,
key: index,
style: unhighlightStyle
});
}
})
}));
}
from react-highlight-words.
+1. I'm getting the same thing.
from react-highlight-words.
More information:
I ran npm i --save react-highlight-words
as specified in the readme. I then added the following line to the top of the file in question:
import {Highlighter} from 'react-highlight-words';
When I do so, vscode gives me the following error:
from react-highlight-words.
@bvaughn or @gabalafou any updates on this? It's been open for a while.
from react-highlight-words.
npm install --save-dev @types/react-highlight-words ??
from react-highlight-words.
Related Issues (20)
- I am unable to display html text in highlighter. HOT 4
- Highlight only entire words instead of partial words HOT 1
- What if we need the text to be a paragraph tag instead of a span tag? HOT 1
- Is it not possible to utilize multiple highlight colors? HOT 1
- Access active element HOT 4
- Certain specific characters cause a null substring issue. HOT 1
- searchWords.filter is not a function HOT 1
- Crashes when adding [ or \ characters to search string HOT 2
- react-highlight-words getting crash on some special symbols HOT 1
- Add motivation of package HOT 3
- Passing additional information to findChunks HOT 1
- module not working in Nextjs 14 HOT 7
- Can I only match one time ? HOT 1
- How to get index? HOT 1
- dist is very large HOT 3
- Problems with React 16
- Making some words in the text bold HOT 1
- Versioning
- How to combine with react-markdown? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-highlight-words.