react-keywords 0.0.1 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +96 -5
  2. package/cjs/index.d.ts +10 -0
  3. package/cjs/index.js +64 -0
  4. package/cjs/index.js.map +34 -0
  5. package/dist/keywords.js +137 -0
  6. package/dist/keywords.min.js +2 -0
  7. package/dist/keywords.min.js.LICENSE.txt +9 -0
  8. package/esm/index.d.ts +10 -0
  9. package/esm/index.js +54 -0
  10. package/esm/index.js.map +35 -0
  11. package/package.json +10 -1
  12. package/src/index.tsx +10 -7
  13. package/tsconfig.json +0 -9
package/README.md CHANGED
@@ -3,12 +3,15 @@ react-keywords
3
3
  ===
4
4
  <!--rehype:ignore:end-->
5
5
 
6
- [![Build & Deploy](https://github.com/uiwjs/react-keywords/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-keywords/actions/workflows/ci.yml)
6
+ [![CI](https://github.com/uiwjs/react-keywords/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-keywords/actions/workflows/ci.yml)
7
7
  [![npm version](https://img.shields.io/npm/v/react-keywords.svg)](https://www.npmjs.com/package/react-keywords)
8
8
  [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/react-keywords/file/README.md)
9
9
 
10
10
  Highlight a keyword in a piece of text and return a React element.
11
11
 
12
+ <img width="518" alt="Highlight keyword" src="https://user-images.githubusercontent.com/1680273/182382842-c991e9ef-353d-45b0-9e5a-319b56e397d8.png">
13
+
14
+
12
15
  ## Installation
13
16
 
14
17
  ```bash
@@ -17,6 +20,23 @@ npm i react-keywords
17
20
 
18
21
  ## Basic Usage
19
22
 
23
+ ```jsx
24
+ import React from 'react';
25
+ import Keywords from 'react-keywords';
26
+
27
+ export default function Demo() {
28
+ return (
29
+ <Keywords value="react">
30
+ Highlight a keyword in a piece of text and return a React element.
31
+
32
+ React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
33
+
34
+ Build encapsulated components that manage their own state, then compose them to make complex UIs.
35
+ </Keywords>
36
+ );
37
+ }
38
+ ```
39
+
20
40
  ```jsx mdx:preview
21
41
  import React, { useState, Fragment } from 'react';
22
42
  import Keywords from 'react-keywords';
@@ -28,13 +48,17 @@ export default function Demo() {
28
48
  <input value={value} onChange={(evn) => setValue(evn.target.value)} />
29
49
  <Keywords value={value}>
30
50
  Highlight a keyword in a piece of text and return a React element.
51
+
52
+ React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
53
+
54
+ Build encapsulated components that manage their own state, then compose them to make complex UIs.
31
55
  </Keywords>
32
56
  </Fragment>
33
57
  );
34
58
  }
35
59
  ```
36
60
 
37
- ## render
61
+ ### render
38
62
 
39
63
  ```jsx mdx:preview
40
64
  import React, { useState, Fragment } from 'react';
@@ -54,7 +78,7 @@ export default function Demo() {
54
78
  }
55
79
  ```
56
80
 
57
- ## color
81
+ ### color
58
82
 
59
83
  ```jsx mdx:preview
60
84
  import React, { useState, Fragment } from 'react';
@@ -74,17 +98,84 @@ export default function Demo() {
74
98
  }
75
99
  ```
76
100
 
101
+ ### caseIgnored
102
+
103
+ Case is ignored by default `caseIgnored=true`.
104
+
105
+ ```jsx mdx:preview
106
+ import React, { useState, Fragment } from 'react';
107
+ import Keywords from 'react-keywords';
108
+
109
+ export default function Demo() {
110
+ const [value, setValue] = useState('re');
111
+ const text = `caseIgnored={true} Highlight A Keyword In A Piece Of Text And Return A React Element.`
112
+ return (
113
+ <Fragment>
114
+ <input value={value} onChange={(evn) => setValue(evn.target.value)} />
115
+ <br />
116
+ <Keywords value={value} color="red" backgroundColor="">
117
+ {text}
118
+ </Keywords>
119
+ <br />
120
+ <Keywords
121
+ value={value}
122
+ caseIgnored={false}
123
+ children={`caseIgnored={false} Highlight a keyword in a piece of text and return a React element.`}
124
+ />
125
+ </Fragment>
126
+ );
127
+ }
128
+ ```
129
+
130
+ ## Support bundle
131
+
132
+ ```html
133
+ <!DOCTYPE html>
134
+ <html lang="en">
135
+ <head>
136
+ <script src="https://unpkg.com/@babel/standalone@7.18.10/babel.min.js" crossorigin></script>
137
+ <script src="https://unpkg.com/react@18.x/umd/react.development.js" crossorigin></script>
138
+ <script src="https://unpkg.com/react-dom@18.x/umd/react-dom.development.js" crossorigin></script>
139
+ <script src="https://unpkg.com/@uiw/codepen-require-polyfill/index.js" crossorigin></script>
140
+ </head>
141
+ <body>
142
+ <div id="container" style="padding: 24px"></div>
143
+ <script src="https://unpkg.com/react-keywords/dist/keywords.min.js"></script>
144
+ <script type="text/babel">
145
+ import Keywords from 'react-keywords';
146
+
147
+ function Demo() {
148
+ const [value, setValue] = React.useState('react');
149
+ return (
150
+ <React.Fragment>
151
+ <input value={value} onChange={(evn) => setValue(evn.target.value)} />
152
+ <Keywords value={value}>
153
+ Highlight a keyword in a piece of text and return a React element.
154
+ </Keywords>
155
+ </React.Fragment>
156
+ );
157
+ }
158
+ const container = document.getElementById('container');
159
+ const root = ReactDOM.createRoot(container);
160
+ root.render(<Demo />);
161
+ </script>
162
+ </body>
163
+ </html>
164
+ ```
165
+
77
166
  ## API
78
167
 
79
168
  ```ts
169
+ import { FC, PropsWithChildren } from 'react';
80
170
  export interface KeywordsProps {
81
171
  value?: string;
82
- children?: string;
83
172
  color?: string;
173
+ caseIgnored?: boolean;
84
174
  backgroundColor?: string;
85
175
  render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
86
176
  }
87
- export default function Keywords(props: KeywordsProps): JSX.Element | undefined;
177
+ declare const KeywordsInner: FC<PropsWithChildren<KeywordsProps>>;
178
+ export default KeywordsInner;
88
179
  ```
89
180
 
90
181
  ## Contributors
package/cjs/index.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { FC, PropsWithChildren } from 'react';
2
+ export interface KeywordsProps {
3
+ value?: string;
4
+ color?: string;
5
+ caseIgnored?: boolean;
6
+ backgroundColor?: string;
7
+ render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
8
+ }
9
+ declare const KeywordsInner: FC<PropsWithChildren<KeywordsProps>>;
10
+ export default KeywordsInner;
package/cjs/index.js ADDED
@@ -0,0 +1,64 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = void 0;
7
+
8
+ var _react = require("react");
9
+
10
+ var _jsxRuntime = require("react/jsx-runtime");
11
+
12
+ var Highlight = function Highlight(props) {
13
+ var children = props.children,
14
+ value = props.value,
15
+ color = props.color,
16
+ backgroundColor = props.backgroundColor,
17
+ render = props.render;
18
+ var child = (0, _react.useMemo)(function () {
19
+ return render ? render(value, color, backgroundColor) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
20
+ style: {
21
+ color: color,
22
+ backgroundColor: backgroundColor
23
+ },
24
+ children: value
25
+ });
26
+ }, [color, backgroundColor, value]);
27
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
28
+ children: [children, value && child]
29
+ });
30
+ };
31
+
32
+ var KeywordsInner = function KeywordsInner(props) {
33
+ var children = props.children,
34
+ _props$caseIgnored = props.caseIgnored,
35
+ caseIgnored = _props$caseIgnored === void 0 ? true : _props$caseIgnored,
36
+ _props$color = props.color,
37
+ color = _props$color === void 0 ? 'inherit' : _props$color,
38
+ _props$backgroundColo = props.backgroundColor,
39
+ backgroundColor = _props$backgroundColo === void 0 ? '#ffff00' : _props$backgroundColo,
40
+ value = props.value,
41
+ render = props.render;
42
+ if (typeof children !== 'string') return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
43
+ children: children
44
+ });
45
+ var splitMatch = new RegExp("".concat(value), caseIgnored ? 'ig' : 'g');
46
+ var values = value ? children.match(splitMatch) : [];
47
+ var matched = children.split(splitMatch);
48
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
49
+ children: matched.map(function (item, idx) {
50
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Highlight, {
51
+ color: color,
52
+ value: matched.length > idx + 1 ? values[idx] : undefined,
53
+ render: render,
54
+ backgroundColor: backgroundColor,
55
+ children: item
56
+ }, idx);
57
+ })
58
+ });
59
+ };
60
+
61
+ var _default = KeywordsInner;
62
+ exports["default"] = _default;
63
+ module.exports = exports.default;
64
+ //# sourceMappingURL=index.js.map
package/cjs/index.js.map ADDED
@@ -0,0 +1,34 @@
1
+ {
2
+ "version": 3,
3
+ "names": [
4
+ "Highlight",
5
+ "props",
6
+ "children",
7
+ "value",
8
+ "color",
9
+ "backgroundColor",
10
+ "render",
11
+ "child",
12
+ "useMemo",
13
+ "KeywordsInner",
14
+ "caseIgnored",
15
+ "splitMatch",
16
+ "RegExp",
17
+ "values",
18
+ "match",
19
+ "matched",
20
+ "split",
21
+ "map",
22
+ "item",
23
+ "idx",
24
+ "length",
25
+ "undefined"
26
+ ],
27
+ "sources": [
28
+ "../src/index.tsx"
29
+ ],
30
+ "sourcesContent": [
31
+ "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"
32
+ ],
33
+ "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"
34
+ }
package/dist/keywords.js ADDED
@@ -0,0 +1,137 @@
1
+ (function webpackUniversalModuleDefinition(root, factory) {
2
+ if(typeof exports === 'object' && typeof module === 'object')
3
+ module.exports = factory(require("react"));
4
+ else if(typeof define === 'function' && define.amd)
5
+ define(["react"], factory);
6
+ else if(typeof exports === 'object')
7
+ exports["react-keywords"] = factory(require("react"));
8
+ else
9
+ root["react-keywords"] = factory(root["React"]);
10
+ })(self, (__WEBPACK_EXTERNAL_MODULE__787__) => {
11
+ return /******/ (() => { // webpackBootstrap
12
+ /******/ "use strict";
13
+ /******/ var __webpack_modules__ = ({
14
+
15
+ /***/ 298:
16
+ /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
17
+
18
+ var __webpack_unused_export__;
19
+ /**
20
+ * @license React
21
+ * react-jsx-runtime.production.min.js
22
+ *
23
+ * Copyright (c) Facebook, Inc. and its affiliates.
24
+ *
25
+ * This source code is licensed under the MIT license found in the
26
+ * LICENSE file in the root directory of this source tree.
27
+ */
28
+ var f=__webpack_require__(787),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
29
+ function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}__webpack_unused_export__=l;exports.jsx=q;exports.jsxs=q;
30
+
31
+
32
+ /***/ }),
33
+
34
+ /***/ 605:
35
+ /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
36
+
37
+
38
+
39
+ if (true) {
40
+ module.exports = __webpack_require__(298);
41
+ } else {}
42
+
43
+
44
+ /***/ }),
45
+
46
+ /***/ 787:
47
+ /***/ ((module) => {
48
+
49
+ module.exports = __WEBPACK_EXTERNAL_MODULE__787__;
50
+
51
+ /***/ })
52
+
53
+ /******/ });
54
+ /************************************************************************/
55
+ /******/ // The module cache
56
+ /******/ var __webpack_module_cache__ = {};
57
+ /******/
58
+ /******/ // The require function
59
+ /******/ function __webpack_require__(moduleId) {
60
+ /******/ // Check if module is in cache
61
+ /******/ var cachedModule = __webpack_module_cache__[moduleId];
62
+ /******/ if (cachedModule !== undefined) {
63
+ /******/ return cachedModule.exports;
64
+ /******/ }
65
+ /******/ // Create a new module (and put it into the cache)
66
+ /******/ var module = __webpack_module_cache__[moduleId] = {
67
+ /******/ // no module.id needed
68
+ /******/ // no module.loaded needed
69
+ /******/ exports: {}
70
+ /******/ };
71
+ /******/
72
+ /******/ // Execute the module function
73
+ /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
74
+ /******/
75
+ /******/ // Return the exports of the module
76
+ /******/ return module.exports;
77
+ /******/ }
78
+ /******/
79
+ /************************************************************************/
80
+ /******/ /* webpack/runtime/compat get default export */
81
+ /******/ (() => {
82
+ /******/ // getDefaultExport function for compatibility with non-harmony modules
83
+ /******/ __webpack_require__.n = (module) => {
84
+ /******/ var getter = module && module.__esModule ?
85
+ /******/ () => (module['default']) :
86
+ /******/ () => (module);
87
+ /******/ __webpack_require__.d(getter, { a: getter });
88
+ /******/ return getter;
89
+ /******/ };
90
+ /******/ })();
91
+ /******/
92
+ /******/ /* webpack/runtime/define property getters */
93
+ /******/ (() => {
94
+ /******/ // define getter functions for harmony exports
95
+ /******/ __webpack_require__.d = (exports, definition) => {
96
+ /******/ for(var key in definition) {
97
+ /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
98
+ /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
99
+ /******/ }
100
+ /******/ }
101
+ /******/ };
102
+ /******/ })();
103
+ /******/
104
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
105
+ /******/ (() => {
106
+ /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
107
+ /******/ })();
108
+ /******/
109
+ /******/ /* webpack/runtime/make namespace object */
110
+ /******/ (() => {
111
+ /******/ // define __esModule on exports
112
+ /******/ __webpack_require__.r = (exports) => {
113
+ /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
114
+ /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
115
+ /******/ }
116
+ /******/ Object.defineProperty(exports, '__esModule', { value: true });
117
+ /******/ };
118
+ /******/ })();
119
+ /******/
120
+ /************************************************************************/
121
+ var __webpack_exports__ = {};
122
+ // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
123
+ (() => {
124
+ __webpack_require__.r(__webpack_exports__);
125
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
126
+ /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
127
+ /* harmony export */ });
128
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(787);
129
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
130
+ /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(605);
131
+ 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);
132
+ })();
133
+
134
+ /******/ return __webpack_exports__;
135
+ /******/ })()
136
+ ;
137
+ });
package/dist/keywords.min.js ADDED
@@ -0,0 +1,2 @@
1
+ /*! For license information please see keywords.min.js.LICENSE.txt */
2
+ !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/dist/keywords.min.js.LICENSE.txt ADDED
@@ -0,0 +1,9 @@
1
+ /**
2
+ * @license React
3
+ * react-jsx-runtime.production.min.js
4
+ *
5
+ * Copyright (c) Facebook, Inc. and its affiliates.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
package/esm/index.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { FC, PropsWithChildren } from 'react';
2
+ export interface KeywordsProps {
3
+ value?: string;
4
+ color?: string;
5
+ caseIgnored?: boolean;
6
+ backgroundColor?: string;
7
+ render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
8
+ }
9
+ declare const KeywordsInner: FC<PropsWithChildren<KeywordsProps>>;
10
+ export default KeywordsInner;
package/esm/index.js ADDED
@@ -0,0 +1,54 @@
1
+ import { Fragment, useMemo } from 'react';
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { jsxs as _jsxs } from "react/jsx-runtime";
4
+
5
+ var Highlight = props => {
6
+ var {
7
+ children,
8
+ value,
9
+ color,
10
+ backgroundColor,
11
+ render
12
+ } = props;
13
+ var child = useMemo(() => render ? render(value, color, backgroundColor) : /*#__PURE__*/_jsx("span", {
14
+ style: {
15
+ color,
16
+ backgroundColor
17
+ },
18
+ children: value
19
+ }), [color, backgroundColor, value]);
20
+ return /*#__PURE__*/_jsxs(Fragment, {
21
+ children: [children, value && child]
22
+ });
23
+ };
24
+
25
+ var KeywordsInner = props => {
26
+ var {
27
+ children,
28
+ caseIgnored = true,
29
+ color = 'inherit',
30
+ backgroundColor = '#ffff00',
31
+ value,
32
+ render
33
+ } = props;
34
+ if (typeof children !== 'string') return /*#__PURE__*/_jsx(Fragment, {
35
+ children: children
36
+ });
37
+ var splitMatch = new RegExp("" + value, caseIgnored ? 'ig' : 'g');
38
+ var values = value ? children.match(splitMatch) : [];
39
+ var matched = children.split(splitMatch);
40
+ return /*#__PURE__*/_jsx(Fragment, {
41
+ children: matched.map((item, idx) => {
42
+ return /*#__PURE__*/_jsx(Highlight, {
43
+ color: color,
44
+ value: matched.length > idx + 1 ? values[idx] : undefined,
45
+ render: render,
46
+ backgroundColor: backgroundColor,
47
+ children: item
48
+ }, idx);
49
+ })
50
+ });
51
+ };
52
+
53
+ export default KeywordsInner;
54
+ //# sourceMappingURL=index.js.map
package/esm/index.js.map ADDED
@@ -0,0 +1,35 @@
1
+ {
2
+ "version": 3,
3
+ "names": [
4
+ "Fragment",
5
+ "useMemo",
6
+ "Highlight",
7
+ "props",
8
+ "children",
9
+ "value",
10
+ "color",
11
+ "backgroundColor",
12
+ "render",
13
+ "child",
14
+ "KeywordsInner",
15
+ "caseIgnored",
16
+ "splitMatch",
17
+ "RegExp",
18
+ "values",
19
+ "match",
20
+ "matched",
21
+ "split",
22
+ "map",
23
+ "item",
24
+ "idx",
25
+ "length",
26
+ "undefined"
27
+ ],
28
+ "sources": [
29
+ "../src/index.tsx"
30
+ ],
31
+ "sourcesContent": [
32
+ "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"
33
+ ],
34
+ "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"
35
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-keywords",
3
- "version": "0.0.1",
3
+ "version": "0.0.4",
4
4
  "description": "Highlight a keyword in a piece of text and return a React element.",
5
5
  "homepage": "https://uiwjs.github.io/react-keywords/",
6
6
  "author": "kenny wang <wowohoo@qq.com>",
@@ -14,9 +14,18 @@
14
14
  "scripts": {
15
15
  "watch": "tsbb watch",
16
16
  "build": "tsbb build",
17
+ "bundle": "ncc build src/index.tsx --target web --filename keywords",
18
+ "bundle:watch": "ncc watch src/index.tsx --target web --filename keywords",
19
+ "bundle:min": "ncc build src/index.tsx --target web --filename keywords --minify",
17
20
  "test": "tsbb test --env=jsdom",
18
21
  "coverage": "tsbb test --env=jsdom --coverage --bail"
19
22
  },
23
+ "files": [
24
+ "src",
25
+ "dist",
26
+ "esm",
27
+ "cjs"
28
+ ],
20
29
  "keywords": [
21
30
  "react",
22
31
  "react-keywords",
package/src/index.tsx CHANGED
@@ -2,8 +2,8 @@ import { FC, Fragment, PropsWithChildren, useMemo } from 'react';
2
2
 
3
3
  export interface KeywordsProps {
4
4
  value?: string;
5
- children?: string;
6
5
  color?: string;
6
+ caseIgnored?: boolean;
7
7
  backgroundColor?: string;
8
8
  render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
9
9
  }
@@ -23,10 +23,11 @@ const Highlight: FC<PropsWithChildren<HighlightProps>> = (props) => {
23
23
  );
24
24
  };
25
25
 
26
- export default function Keywords(props: KeywordsProps) {
27
- const { children, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;
28
- if (typeof children !== 'string') return children;
29
- const splitMatch = new RegExp(`${value}`, 'ig');
26
+ const KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {
27
+ const { children, caseIgnored = true, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;
28
+ if (typeof children !== 'string') return <Fragment>{children}</Fragment>;
29
+ const splitMatch = new RegExp(`${value}`, caseIgnored ? 'ig' : 'g');
30
+ const values = value ? children.match(splitMatch) : [];
30
31
  const matched = children.split(splitMatch);
31
32
  return (
32
33
  <Fragment>
@@ -35,7 +36,7 @@ export default function Keywords(props: KeywordsProps) {
35
36
  <Highlight
36
37
  key={idx}
37
38
  color={color}
38
- value={matched.length > idx + 1 ? value : undefined}
39
+ value={matched.length > idx + 1 ? (values as string[])[idx] : undefined}
39
40
  render={render}
40
41
  backgroundColor={backgroundColor}
41
42
  >
@@ -45,4 +46,6 @@ export default function Keywords(props: KeywordsProps) {
45
46
  })}
46
47
  </Fragment>
47
48
  );
48
- }
49
+ };
50
+
51
+ export default KeywordsInner;
package/tsconfig.json DELETED
@@ -1,9 +0,0 @@
1
- {
2
- "extends": "../tsconfig",
3
- "include": ["src", ".kktrc.ts"],
4
- "compilerOptions": {
5
- "outDir": "./cjs",
6
- "baseUrl": ".",
7
- "noEmit": false
8
- }
9
- }