react-keywords 0.0.3 → 0.0.4

package/README.md

@@ -98,6 +98,35 @@ export default function Demo() {
 }
 ```
 
+### caseIgnored
+
+Case is ignored by default `caseIgnored=true`.
+
+```jsx mdx:preview
+import React, { useState, Fragment } from 'react';
+import Keywords from 'react-keywords';
+
+export default function Demo() {
+  const [value, setValue] = useState('re');
+  const text = `caseIgnored={true} Highlight A Keyword In A Piece Of Text And Return A React Element.`
+  return (
+    <Fragment>
+      <input value={value} onChange={(evn) => setValue(evn.target.value)} />
+      <br />
+      <Keywords value={value} color="red" backgroundColor="">
+        {text}
+      </Keywords>
+      <br />
+      <Keywords
+        value={value}
+        caseIgnored={false}
+        children={`caseIgnored={false} Highlight a keyword in a piece of text and return a React element.`}
+      />
+    </Fragment>
+  );
+}
+```
+
 ## Support bundle
 
 ```html
@@ -137,14 +166,16 @@ export default function Demo() {
 ## API
 
 ```ts
+import { FC, PropsWithChildren } from 'react';
 export interface KeywordsProps {
   value?: string;
-  children?: string;
   color?: string;
+  caseIgnored?: boolean;
   backgroundColor?: string;
   render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
 }
-export default function Keywords(props: KeywordsProps): JSX.Element | undefined;
+declare const KeywordsInner: FC<PropsWithChildren<KeywordsProps>>;
+export default KeywordsInner;
 ```
 
 ## Contributors

package/cjs/index.d.ts

@@ -2,6 +2,7 @@ import { FC, PropsWithChildren } from 'react';
 export interface KeywordsProps {
     value?: string;
     color?: string;
+    caseIgnored?: boolean;
     backgroundColor?: string;
     render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
 }

package/cjs/index.js

@@ -31,6 +31,8 @@ var Highlight = function Highlight(props) {
 
 var KeywordsInner = function KeywordsInner(props) {
   var children = props.children,
+      _props$caseIgnored = props.caseIgnored,
+      caseIgnored = _props$caseIgnored === void 0 ? true : _props$caseIgnored,
       _props$color = props.color,
       color = _props$color === void 0 ? 'inherit' : _props$color,
       _props$backgroundColo = props.backgroundColor,
@@ -40,13 +42,14 @@ var KeywordsInner = function KeywordsInner(props) {
   if (typeof children !== 'string') return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
     children: children
   });
-  var splitMatch = new RegExp("".concat(value), 'ig');
+  var splitMatch = new RegExp("".concat(value), caseIgnored ? 'ig' : 'g');
+  var values = value ? children.match(splitMatch) : [];
   var matched = children.split(splitMatch);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
     children: matched.map(function (item, idx) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Highlight, {
         color: color,
-        value: matched.length > idx + 1 ? value : undefined,
+        value: matched.length > idx + 1 ? values[idx] : undefined,
         render: render,
         backgroundColor: backgroundColor,
         children: item

package/cjs/index.js.map

@@ -11,8 +11,11 @@
     "child",
     "useMemo",
     "KeywordsInner",
+    "caseIgnored",
     "splitMatch",
     "RegExp",
+    "values",
+    "match",
     "matched",
     "split",
     "map",
@@ -25,7 +28,7 @@
     "../src/index.tsx"
   ],
   "sourcesContent": [
-    "import { FC, Fragment, PropsWithChildren, useMemo } from 'react';\n\nexport interface KeywordsProps {\n  value?: string;\n  color?: string;\n  backgroundColor?: string;\n  render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;\n}\n\ninterface HighlightProps extends KeywordsProps {}\nconst Highlight: FC<PropsWithChildren<HighlightProps>> = (props) => {\n  const { children, value, color, backgroundColor, render } = props;\n  const child = useMemo(\n    () => (render ? render(value!, color!, backgroundColor!) : <span style={{ color, backgroundColor }}>{value}</span>),\n    [color, backgroundColor, value],\n  );\n  return (\n    <Fragment>\n      {children}\n      {value && child}\n    </Fragment>\n  );\n};\n\nconst KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {\n  const { children, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;\n  if (typeof children !== 'string') return <Fragment>{children}</Fragment>;\n  const splitMatch = new RegExp(`${value}`, 'ig');\n  const matched = children.split(splitMatch);\n  return (\n    <Fragment>\n      {matched.map((item, idx) => {\n        return (\n          <Highlight\n            key={idx}\n            color={color}\n            value={matched.length > idx + 1 ? value : undefined}\n            render={render}\n            backgroundColor={backgroundColor}\n          >\n            {item}\n          </Highlight>\n        );\n      })}\n    </Fragment>\n  );\n};\n\nexport default KeywordsInner;\n"
+    "import { FC, Fragment, PropsWithChildren, useMemo } from 'react';\n\nexport interface KeywordsProps {\n  value?: string;\n  color?: string;\n  caseIgnored?: boolean;\n  backgroundColor?: string;\n  render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;\n}\n\ninterface HighlightProps extends KeywordsProps {}\nconst Highlight: FC<PropsWithChildren<HighlightProps>> = (props) => {\n  const { children, value, color, backgroundColor, render } = props;\n  const child = useMemo(\n    () => (render ? render(value!, color!, backgroundColor!) : <span style={{ color, backgroundColor }}>{value}</span>),\n    [color, backgroundColor, value],\n  );\n  return (\n    <Fragment>\n      {children}\n      {value && child}\n    </Fragment>\n  );\n};\n\nconst KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {\n  const { children, caseIgnored = true, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;\n  if (typeof children !== 'string') return <Fragment>{children}</Fragment>;\n  const splitMatch = new RegExp(`${value}`, caseIgnored ? 'ig' : 'g');\n  const values = value ? children.match(splitMatch) : [];\n  const matched = children.split(splitMatch);\n  return (\n    <Fragment>\n      {matched.map((item, idx) => {\n        return (\n          <Highlight\n            key={idx}\n            color={color}\n            value={matched.length > idx + 1 ? (values as string[])[idx] : undefined}\n            render={render}\n            backgroundColor={backgroundColor}\n          >\n            {item}\n          </Highlight>\n        );\n      })}\n    </Fragment>\n  );\n};\n\nexport default KeywordsInner;\n"
   ],
-  "mappings": ";;;;;;;AAAA;;;;AAUA,IAAMA,SAAgD,GAAG,SAAnDA,SAAmD,CAACC,KAAD,EAAW;EAClE,IAAQC,QAAR,GAA4DD,KAA5D,CAAQC,QAAR;EAAA,IAAkBC,KAAlB,GAA4DF,KAA5D,CAAkBE,KAAlB;EAAA,IAAyBC,KAAzB,GAA4DH,KAA5D,CAAyBG,KAAzB;EAAA,IAAgCC,eAAhC,GAA4DJ,KAA5D,CAAgCI,eAAhC;EAAA,IAAiDC,MAAjD,GAA4DL,KAA5D,CAAiDK,MAAjD;EACA,IAAMC,KAAK,GAAG,IAAAC,cAAA,EACZ;IAAA,OAAOF,MAAM,GAAGA,MAAM,CAACH,KAAD,EAASC,KAAT,EAAiBC,eAAjB,CAAT,gBAA8C;MAAM,KAAK,EAAE;QAAED,KAAK,EAALA,KAAF;QAASC,eAAe,EAAfA;MAAT,CAAb;MAAA,UAA0CF;IAA1C,EAA3D;EAAA,CADY,EAEZ,CAACC,KAAD,EAAQC,eAAR,EAAyBF,KAAzB,CAFY,CAAd;EAIA,oBACE,sBAAC,eAAD;IAAA,WACGD,QADH,EAEGC,KAAK,IAAII,KAFZ;EAAA,EADF;AAMD,CAZD;;AAcA,IAAME,aAAmD,GAAG,SAAtDA,aAAsD,CAACR,KAAD,EAAW;EACrE,IAAQC,QAAR,GAAoFD,KAApF,CAAQC,QAAR;EAAA,mBAAoFD,KAApF,CAAkBG,KAAlB;EAAA,IAAkBA,KAAlB,6BAA0B,SAA1B;EAAA,4BAAoFH,KAApF,CAAqCI,eAArC;EAAA,IAAqCA,eAArC,sCAAuD,SAAvD;EAAA,IAAkEF,KAAlE,GAAoFF,KAApF,CAAkEE,KAAlE;EAAA,IAAyEG,MAAzE,GAAoFL,KAApF,CAAyEK,MAAzE;EACA,IAAI,OAAOJ,QAAP,KAAoB,QAAxB,EAAkC,oBAAO,qBAAC,eAAD;IAAA,UAAWA;EAAX,EAAP;EAClC,IAAMQ,UAAU,GAAG,IAAIC,MAAJ,WAAcR,KAAd,GAAuB,IAAvB,CAAnB;EACA,IAAMS,OAAO,GAAGV,QAAQ,CAACW,KAAT,CAAeH,UAAf,CAAhB;EACA,oBACE,qBAAC,eAAD;IAAA,UACGE,OAAO,CAACE,GAAR,CAAY,UAACC,IAAD,EAAOC,GAAP,EAAe;MAC1B,oBACE,qBAAC,SAAD;QAEE,KAAK,EAAEZ,KAFT;QAGE,KAAK,EAAEQ,OAAO,CAACK,MAAR,GAAiBD,GAAG,GAAG,CAAvB,GAA2Bb,KAA3B,GAAmCe,SAH5C;QAIE,MAAM,EAAEZ,MAJV;QAKE,eAAe,EAAED,eALnB;QAAA,UAOGU;MAPH,GACOC,GADP,CADF;IAWD,CAZA;EADH,EADF;AAiBD,CAtBD;;eAwBeP,a"
+  "mappings": ";;;;;;;AAAA;;;;AAWA,IAAMA,SAAgD,GAAG,SAAnDA,SAAmD,CAACC,KAAD,EAAW;EAClE,IAAQC,QAAR,GAA4DD,KAA5D,CAAQC,QAAR;EAAA,IAAkBC,KAAlB,GAA4DF,KAA5D,CAAkBE,KAAlB;EAAA,IAAyBC,KAAzB,GAA4DH,KAA5D,CAAyBG,KAAzB;EAAA,IAAgCC,eAAhC,GAA4DJ,KAA5D,CAAgCI,eAAhC;EAAA,IAAiDC,MAAjD,GAA4DL,KAA5D,CAAiDK,MAAjD;EACA,IAAMC,KAAK,GAAG,IAAAC,cAAA,EACZ;IAAA,OAAOF,MAAM,GAAGA,MAAM,CAACH,KAAD,EAASC,KAAT,EAAiBC,eAAjB,CAAT,gBAA8C;MAAM,KAAK,EAAE;QAAED,KAAK,EAALA,KAAF;QAASC,eAAe,EAAfA;MAAT,CAAb;MAAA,UAA0CF;IAA1C,EAA3D;EAAA,CADY,EAEZ,CAACC,KAAD,EAAQC,eAAR,EAAyBF,KAAzB,CAFY,CAAd;EAIA,oBACE,sBAAC,eAAD;IAAA,WACGD,QADH,EAEGC,KAAK,IAAII,KAFZ;EAAA,EADF;AAMD,CAZD;;AAcA,IAAME,aAAmD,GAAG,SAAtDA,aAAsD,CAACR,KAAD,EAAW;EACrE,IAAQC,QAAR,GAAwGD,KAAxG,CAAQC,QAAR;EAAA,yBAAwGD,KAAxG,CAAkBS,WAAlB;EAAA,IAAkBA,WAAlB,mCAAgC,IAAhC;EAAA,mBAAwGT,KAAxG,CAAsCG,KAAtC;EAAA,IAAsCA,KAAtC,6BAA8C,SAA9C;EAAA,4BAAwGH,KAAxG,CAAyDI,eAAzD;EAAA,IAAyDA,eAAzD,sCAA2E,SAA3E;EAAA,IAAsFF,KAAtF,GAAwGF,KAAxG,CAAsFE,KAAtF;EAAA,IAA6FG,MAA7F,GAAwGL,KAAxG,CAA6FK,MAA7F;EACA,IAAI,OAAOJ,QAAP,KAAoB,QAAxB,EAAkC,oBAAO,qBAAC,eAAD;IAAA,UAAWA;EAAX,EAAP;EAClC,IAAMS,UAAU,GAAG,IAAIC,MAAJ,WAAcT,KAAd,GAAuBO,WAAW,GAAG,IAAH,GAAU,GAA5C,CAAnB;EACA,IAAMG,MAAM,GAAGV,KAAK,GAAGD,QAAQ,CAACY,KAAT,CAAeH,UAAf,CAAH,GAAgC,EAApD;EACA,IAAMI,OAAO,GAAGb,QAAQ,CAACc,KAAT,CAAeL,UAAf,CAAhB;EACA,oBACE,qBAAC,eAAD;IAAA,UACGI,OAAO,CAACE,GAAR,CAAY,UAACC,IAAD,EAAOC,GAAP,EAAe;MAC1B,oBACE,qBAAC,SAAD;QAEE,KAAK,EAAEf,KAFT;QAGE,KAAK,EAAEW,OAAO,CAACK,MAAR,GAAiBD,GAAG,GAAG,CAAvB,GAA4BN,MAAD,CAAqBM,GAArB,CAA3B,GAAuDE,SAHhE;QAIE,MAAM,EAAEf,MAJV;QAKE,eAAe,EAAED,eALnB;QAAA,UAOGa;MAPH,GACOC,GADP,CADF;IAWD,CAZA;EADH,EADF;AAiBD,CAvBD;;eAyBeV,a"
 }

package/dist/keywords.js

@@ -128,7 +128,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(787);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(605);
-var Highlight=function Highlight(props){var children=props.children,value=props.value,color=props.color,backgroundColor=props.backgroundColor,render=props.render;var child=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function(){return render?render(value,color,backgroundColor):/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("span",{style:{color:color,backgroundColor:backgroundColor},children:value});},[color,backgroundColor,value]);return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[children,value&&child]});};var KeywordsInner=function KeywordsInner(props){var children=props.children,_props$color=props.color,color=_props$color===void 0?'inherit':_props$color,_props$backgroundColo=props.backgroundColor,backgroundColor=_props$backgroundColo===void 0?'#ffff00':_props$backgroundColo,value=props.value,render=props.render;if(typeof children!=='string')return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:children});var splitMatch=new RegExp("".concat(value),'ig');var matched=children.split(splitMatch);return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:matched.map(function(item,idx){return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(Highlight,{color:color,value:matched.length>idx+1?value:undefined,render:render,backgroundColor:backgroundColor,children:item},idx);})});};/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (KeywordsInner);
+var Highlight=function Highlight(props){var children=props.children,value=props.value,color=props.color,backgroundColor=props.backgroundColor,render=props.render;var child=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function(){return render?render(value,color,backgroundColor):/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("span",{style:{color:color,backgroundColor:backgroundColor},children:value});},[color,backgroundColor,value]);return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[children,value&&child]});};var KeywordsInner=function KeywordsInner(props){var children=props.children,_props$caseIgnored=props.caseIgnored,caseIgnored=_props$caseIgnored===void 0?true:_props$caseIgnored,_props$color=props.color,color=_props$color===void 0?'inherit':_props$color,_props$backgroundColo=props.backgroundColor,backgroundColor=_props$backgroundColo===void 0?'#ffff00':_props$backgroundColo,value=props.value,render=props.render;if(typeof children!=='string')return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:children});var splitMatch=new RegExp("".concat(value),caseIgnored?'ig':'g');var values=value?children.match(splitMatch):[];var matched=children.split(splitMatch);return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:matched.map(function(item,idx){return/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(Highlight,{color:color,value:matched.length>idx+1?values[idx]:undefined,render:render,backgroundColor:backgroundColor,children:item},idx);})});};/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (KeywordsInner);
 })();
 
 /******/ 	return __webpack_exports__;

package/dist/keywords.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see keywords.min.js.LICENSE.txt */
-!function(e,r){"object"===typeof exports&&"object"===typeof module?module.exports=r(require("react")):"function"===typeof define&&define.amd?define(["react"],r):"object"===typeof exports?exports["react-keywords"]=r(require("react")):e["react-keywords"]=r(e.React)}(self,(e=>(()=>{"use strict";var r={298:(e,r,o)=>{var t=o(787),n=Symbol.for("react.element"),a=Symbol.for("react.fragment"),l=Object.prototype.hasOwnProperty,c=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,u={key:!0,ref:!0,__self:!0,__source:!0};function i(e,r,o){var t,a={},i=null,d=null;for(t in void 0!==o&&(i=""+o),void 0!==r.key&&(i=""+r.key),void 0!==r.ref&&(d=r.ref),r)l.call(r,t)&&!u.hasOwnProperty(t)&&(a[t]=r[t]);if(e&&e.defaultProps)for(t in r=e.defaultProps)void 0===a[t]&&(a[t]=r[t]);return{$$typeof:n,type:e,key:i,ref:d,props:a,_owner:c.current}}r.jsx=i,r.jsxs=i},605:(e,r,o)=>{e.exports=o(298)},787:r=>{r.exports=e}},o={};function t(e){var n=o[e];if(void 0!==n)return n.exports;var a=o[e]={exports:{}};return r[e](a,a.exports,t),a.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{t.r(n),t.d(n,{default:()=>a});var e=t(787),r=t(605),o=function(o){var t=o.children,n=o.value,a=o.color,l=o.backgroundColor,c=o.render,u=(0,e.useMemo)((function(){return c?c(n,a,l):(0,r.jsx)("span",{style:{color:a,backgroundColor:l},children:n})}),[a,l,n]);return(0,r.jsxs)(e.Fragment,{children:[t,n&&u]})};const a=function(t){var n=t.children,a=t.color,l=void 0===a?"inherit":a,c=t.backgroundColor,u=void 0===c?"#ffff00":c,i=t.value,d=t.render;if("string"!==typeof n)return(0,r.jsx)(e.Fragment,{children:n});var f=new RegExp("".concat(i),"ig"),s=n.split(f);return(0,r.jsx)(e.Fragment,{children:s.map((function(e,t){return(0,r.jsx)(o,{color:l,value:s.length>t+1?i:void 0,render:d,backgroundColor:u,children:e},t)}))})}})(),n})()));
+!function(e,r){"object"===typeof exports&&"object"===typeof module?module.exports=r(require("react")):"function"===typeof define&&define.amd?define(["react"],r):"object"===typeof exports?exports["react-keywords"]=r(require("react")):e["react-keywords"]=r(e.React)}(self,(e=>(()=>{"use strict";var r={298:(e,r,o)=>{var t=o(787),n=Symbol.for("react.element"),a=Symbol.for("react.fragment"),c=Object.prototype.hasOwnProperty,l=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,d={key:!0,ref:!0,__self:!0,__source:!0};function i(e,r,o){var t,a={},i=null,u=null;for(t in void 0!==o&&(i=""+o),void 0!==r.key&&(i=""+r.key),void 0!==r.ref&&(u=r.ref),r)c.call(r,t)&&!d.hasOwnProperty(t)&&(a[t]=r[t]);if(e&&e.defaultProps)for(t in r=e.defaultProps)void 0===a[t]&&(a[t]=r[t]);return{$$typeof:n,type:e,key:i,ref:u,props:a,_owner:l.current}}r.jsx=i,r.jsxs=i},605:(e,r,o)=>{e.exports=o(298)},787:r=>{r.exports=e}},o={};function t(e){var n=o[e];if(void 0!==n)return n.exports;var a=o[e]={exports:{}};return r[e](a,a.exports,t),a.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{t.r(n),t.d(n,{default:()=>a});var e=t(787),r=t(605),o=function(o){var t=o.children,n=o.value,a=o.color,c=o.backgroundColor,l=o.render,d=(0,e.useMemo)((function(){return l?l(n,a,c):(0,r.jsx)("span",{style:{color:a,backgroundColor:c},children:n})}),[a,c,n]);return(0,r.jsxs)(e.Fragment,{children:[t,n&&d]})};const a=function(t){var n=t.children,a=t.caseIgnored,c=void 0===a||a,l=t.color,d=void 0===l?"inherit":l,i=t.backgroundColor,u=void 0===i?"#ffff00":i,f=t.value,s=t.render;if("string"!==typeof n)return(0,r.jsx)(e.Fragment,{children:n});var p=new RegExp("".concat(f),c?"ig":"g"),y=f?n.match(p):[],v=n.split(p);return(0,r.jsx)(e.Fragment,{children:v.map((function(e,t){return(0,r.jsx)(o,{color:d,value:v.length>t+1?y[t]:void 0,render:s,backgroundColor:u,children:e},t)}))})}})(),n})()));

package/esm/index.d.ts

@@ -2,6 +2,7 @@ import { FC, PropsWithChildren } from 'react';
 export interface KeywordsProps {
     value?: string;
     color?: string;
+    caseIgnored?: boolean;
     backgroundColor?: string;
     render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
 }

package/esm/index.js

@@ -25,6 +25,7 @@ var Highlight = props => {
 var KeywordsInner = props => {
   var {
     children,
+    caseIgnored = true,
     color = 'inherit',
     backgroundColor = '#ffff00',
     value,
@@ -33,13 +34,14 @@ var KeywordsInner = props => {
   if (typeof children !== 'string') return /*#__PURE__*/_jsx(Fragment, {
     children: children
   });
-  var splitMatch = new RegExp("" + value, 'ig');
+  var splitMatch = new RegExp("" + value, caseIgnored ? 'ig' : 'g');
+  var values = value ? children.match(splitMatch) : [];
   var matched = children.split(splitMatch);
   return /*#__PURE__*/_jsx(Fragment, {
     children: matched.map((item, idx) => {
       return /*#__PURE__*/_jsx(Highlight, {
         color: color,
-        value: matched.length > idx + 1 ? value : undefined,
+        value: matched.length > idx + 1 ? values[idx] : undefined,
         render: render,
         backgroundColor: backgroundColor,
         children: item

package/esm/index.js.map

@@ -12,8 +12,11 @@
     "render",
     "child",
     "KeywordsInner",
+    "caseIgnored",
     "splitMatch",
     "RegExp",
+    "values",
+    "match",
     "matched",
     "split",
     "map",
@@ -26,7 +29,7 @@
     "../src/index.tsx"
   ],
   "sourcesContent": [
-    "import { FC, Fragment, PropsWithChildren, useMemo } from 'react';\n\nexport interface KeywordsProps {\n  value?: string;\n  color?: string;\n  backgroundColor?: string;\n  render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;\n}\n\ninterface HighlightProps extends KeywordsProps {}\nconst Highlight: FC<PropsWithChildren<HighlightProps>> = (props) => {\n  const { children, value, color, backgroundColor, render } = props;\n  const child = useMemo(\n    () => (render ? render(value!, color!, backgroundColor!) : <span style={{ color, backgroundColor }}>{value}</span>),\n    [color, backgroundColor, value],\n  );\n  return (\n    <Fragment>\n      {children}\n      {value && child}\n    </Fragment>\n  );\n};\n\nconst KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {\n  const { children, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;\n  if (typeof children !== 'string') return <Fragment>{children}</Fragment>;\n  const splitMatch = new RegExp(`${value}`, 'ig');\n  const matched = children.split(splitMatch);\n  return (\n    <Fragment>\n      {matched.map((item, idx) => {\n        return (\n          <Highlight\n            key={idx}\n            color={color}\n            value={matched.length > idx + 1 ? value : undefined}\n            render={render}\n            backgroundColor={backgroundColor}\n          >\n            {item}\n          </Highlight>\n        );\n      })}\n    </Fragment>\n  );\n};\n\nexport default KeywordsInner;\n"
+    "import { FC, Fragment, PropsWithChildren, useMemo } from 'react';\n\nexport interface KeywordsProps {\n  value?: string;\n  color?: string;\n  caseIgnored?: boolean;\n  backgroundColor?: string;\n  render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;\n}\n\ninterface HighlightProps extends KeywordsProps {}\nconst Highlight: FC<PropsWithChildren<HighlightProps>> = (props) => {\n  const { children, value, color, backgroundColor, render } = props;\n  const child = useMemo(\n    () => (render ? render(value!, color!, backgroundColor!) : <span style={{ color, backgroundColor }}>{value}</span>),\n    [color, backgroundColor, value],\n  );\n  return (\n    <Fragment>\n      {children}\n      {value && child}\n    </Fragment>\n  );\n};\n\nconst KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {\n  const { children, caseIgnored = true, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;\n  if (typeof children !== 'string') return <Fragment>{children}</Fragment>;\n  const splitMatch = new RegExp(`${value}`, caseIgnored ? 'ig' : 'g');\n  const values = value ? children.match(splitMatch) : [];\n  const matched = children.split(splitMatch);\n  return (\n    <Fragment>\n      {matched.map((item, idx) => {\n        return (\n          <Highlight\n            key={idx}\n            color={color}\n            value={matched.length > idx + 1 ? (values as string[])[idx] : undefined}\n            render={render}\n            backgroundColor={backgroundColor}\n          >\n            {item}\n          </Highlight>\n        );\n      })}\n    </Fragment>\n  );\n};\n\nexport default KeywordsInner;\n"
   ],
-  "mappings": "AAAA,SAAaA,QAAb,EAA0CC,OAA1C,QAAyD,OAAzD;;;;AAUA,IAAMC,SAAgD,GAAIC,KAAD,IAAW;EAClE,IAAM;IAAEC,QAAF;IAAYC,KAAZ;IAAmBC,KAAnB;IAA0BC,eAA1B;IAA2CC;EAA3C,IAAsDL,KAA5D;EACA,IAAMM,KAAK,GAAGR,OAAO,CACnB,MAAOO,MAAM,GAAGA,MAAM,CAACH,KAAD,EAASC,KAAT,EAAiBC,eAAjB,CAAT,gBAA8C;IAAM,KAAK,EAAE;MAAED,KAAF;MAASC;IAAT,CAAb;IAAA,UAA0CF;EAA1C,EADxC,EAEnB,CAACC,KAAD,EAAQC,eAAR,EAAyBF,KAAzB,CAFmB,CAArB;EAIA,oBACE,MAAC,QAAD;IAAA,WACGD,QADH,EAEGC,KAAK,IAAII,KAFZ;EAAA,EADF;AAMD,CAZD;;AAcA,IAAMC,aAAmD,GAAIP,KAAD,IAAW;EACrE,IAAM;IAAEC,QAAF;IAAYE,KAAK,GAAG,SAApB;IAA+BC,eAAe,GAAG,SAAjD;IAA4DF,KAA5D;IAAmEG;EAAnE,IAA8EL,KAApF;EACA,IAAI,OAAOC,QAAP,KAAoB,QAAxB,EAAkC,oBAAO,KAAC,QAAD;IAAA,UAAWA;EAAX,EAAP;EAClC,IAAMO,UAAU,GAAG,IAAIC,MAAJ,MAAcP,KAAd,EAAuB,IAAvB,CAAnB;EACA,IAAMQ,OAAO,GAAGT,QAAQ,CAACU,KAAT,CAAeH,UAAf,CAAhB;EACA,oBACE,KAAC,QAAD;IAAA,UACGE,OAAO,CAACE,GAAR,CAAY,CAACC,IAAD,EAAOC,GAAP,KAAe;MAC1B,oBACE,KAAC,SAAD;QAEE,KAAK,EAAEX,KAFT;QAGE,KAAK,EAAEO,OAAO,CAACK,MAAR,GAAiBD,GAAG,GAAG,CAAvB,GAA2BZ,KAA3B,GAAmCc,SAH5C;QAIE,MAAM,EAAEX,MAJV;QAKE,eAAe,EAAED,eALnB;QAAA,UAOGS;MAPH,GACOC,GADP,CADF;IAWD,CAZA;EADH,EADF;AAiBD,CAtBD;;AAwBA,eAAeP,aAAf"
+  "mappings": "AAAA,SAAaA,QAAb,EAA0CC,OAA1C,QAAyD,OAAzD;;;;AAWA,IAAMC,SAAgD,GAAIC,KAAD,IAAW;EAClE,IAAM;IAAEC,QAAF;IAAYC,KAAZ;IAAmBC,KAAnB;IAA0BC,eAA1B;IAA2CC;EAA3C,IAAsDL,KAA5D;EACA,IAAMM,KAAK,GAAGR,OAAO,CACnB,MAAOO,MAAM,GAAGA,MAAM,CAACH,KAAD,EAASC,KAAT,EAAiBC,eAAjB,CAAT,gBAA8C;IAAM,KAAK,EAAE;MAAED,KAAF;MAASC;IAAT,CAAb;IAAA,UAA0CF;EAA1C,EADxC,EAEnB,CAACC,KAAD,EAAQC,eAAR,EAAyBF,KAAzB,CAFmB,CAArB;EAIA,oBACE,MAAC,QAAD;IAAA,WACGD,QADH,EAEGC,KAAK,IAAII,KAFZ;EAAA,EADF;AAMD,CAZD;;AAcA,IAAMC,aAAmD,GAAIP,KAAD,IAAW;EACrE,IAAM;IAAEC,QAAF;IAAYO,WAAW,GAAG,IAA1B;IAAgCL,KAAK,GAAG,SAAxC;IAAmDC,eAAe,GAAG,SAArE;IAAgFF,KAAhF;IAAuFG;EAAvF,IAAkGL,KAAxG;EACA,IAAI,OAAOC,QAAP,KAAoB,QAAxB,EAAkC,oBAAO,KAAC,QAAD;IAAA,UAAWA;EAAX,EAAP;EAClC,IAAMQ,UAAU,GAAG,IAAIC,MAAJ,MAAcR,KAAd,EAAuBM,WAAW,GAAG,IAAH,GAAU,GAA5C,CAAnB;EACA,IAAMG,MAAM,GAAGT,KAAK,GAAGD,QAAQ,CAACW,KAAT,CAAeH,UAAf,CAAH,GAAgC,EAApD;EACA,IAAMI,OAAO,GAAGZ,QAAQ,CAACa,KAAT,CAAeL,UAAf,CAAhB;EACA,oBACE,KAAC,QAAD;IAAA,UACGI,OAAO,CAACE,GAAR,CAAY,CAACC,IAAD,EAAOC,GAAP,KAAe;MAC1B,oBACE,KAAC,SAAD;QAEE,KAAK,EAAEd,KAFT;QAGE,KAAK,EAAEU,OAAO,CAACK,MAAR,GAAiBD,GAAG,GAAG,CAAvB,GAA4BN,MAAD,CAAqBM,GAArB,CAA3B,GAAuDE,SAHhE;QAIE,MAAM,EAAEd,MAJV;QAKE,eAAe,EAAED,eALnB;QAAA,UAOGY;MAPH,GACOC,GADP,CADF;IAWD,CAZA;EADH,EADF;AAiBD,CAvBD;;AAyBA,eAAeV,aAAf"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-keywords",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Highlight a keyword in a piece of text and return a React element.",
   "homepage": "https://uiwjs.github.io/react-keywords/",
   "author": "kenny wang <wowohoo@qq.com>",

package/src/index.tsx

@@ -3,6 +3,7 @@ import { FC, Fragment, PropsWithChildren, useMemo } from 'react';
 export interface KeywordsProps {
   value?: string;
   color?: string;
+  caseIgnored?: boolean;
   backgroundColor?: string;
   render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
 }
@@ -23,9 +24,10 @@ const Highlight: FC<PropsWithChildren<HighlightProps>> = (props) => {
 };
 
 const KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {
-  const { children, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;
+  const { children, caseIgnored = true, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;
   if (typeof children !== 'string') return <Fragment>{children}</Fragment>;
-  const splitMatch = new RegExp(`${value}`, 'ig');
+  const splitMatch = new RegExp(`${value}`, caseIgnored ? 'ig' : 'g');
+  const values = value ? children.match(splitMatch) : [];
   const matched = children.split(splitMatch);
   return (
     <Fragment>
@@ -34,7 +36,7 @@ const KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {
           <Highlight
             key={idx}
             color={color}
-            value={matched.length > idx + 1 ? value : undefined}
+            value={matched.length > idx + 1 ? (values as string[])[idx] : undefined}
             render={render}
             backgroundColor={backgroundColor}
           >