react-keywords 0.0.1 → 0.0.2

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 (4) hide show
  1. package/.kktrc.ts +17 -0
  2. package/README.md +63 -3
  3. package/package.json +4 -1
  4. package/src/index.tsx +5 -4
package/.kktrc.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { Configuration } from 'webpack';
2
+ import { LoaderConfOptions } from 'kkt';
3
+
4
+ export default (conf: Configuration, env: 'production' | 'development', options: LoaderConfOptions) => {
5
+ if (options.bundle) {
6
+ conf.output!.library = 'react-keywords';
7
+ conf.externals = {
8
+ react: {
9
+ root: 'React',
10
+ commonjs2: 'react',
11
+ commonjs: 'react',
12
+ amd: 'react',
13
+ },
14
+ };
15
+ }
16
+ return conf;
17
+ };
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,6 +98,42 @@ export default function Demo() {
74
98
  }
75
99
  ```
76
100
 
101
+ ## Support bundle
102
+
103
+ ```html
104
+ <!DOCTYPE html>
105
+ <html lang="en">
106
+ <head>
107
+ <script src="https://unpkg.com/@babel/standalone@7.18.10/babel.min.js" crossorigin></script>
108
+ <script src="https://unpkg.com/react@18.x/umd/react.development.js" crossorigin></script>
109
+ <script src="https://unpkg.com/react-dom@18.x/umd/react-dom.development.js" crossorigin></script>
110
+ <script src="https://unpkg.com/@uiw/codepen-require-polyfill/index.js" crossorigin></script>
111
+ </head>
112
+ <body>
113
+ <div id="container" style="padding: 24px"></div>
114
+ <script src="https://unpkg.com/react-keywords/dist/keywords.min.js"></script>
115
+ <script type="text/babel">
116
+ import Keywords from 'react-keywords';
117
+
118
+ function Demo() {
119
+ const [value, setValue] = React.useState('react');
120
+ return (
121
+ <React.Fragment>
122
+ <input value={value} onChange={(evn) => setValue(evn.target.value)} />
123
+ <Keywords value={value}>
124
+ Highlight a keyword in a piece of text and return a React element.
125
+ </Keywords>
126
+ </React.Fragment>
127
+ );
128
+ }
129
+ const container = document.getElementById('container');
130
+ const root = ReactDOM.createRoot(container);
131
+ root.render(<Demo />);
132
+ </script>
133
+ </body>
134
+ </html>
135
+ ```
136
+
77
137
  ## API
78
138
 
79
139
  ```ts
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-keywords",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
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,6 +14,9 @@
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
  },
package/src/index.tsx CHANGED
@@ -2,7 +2,6 @@ 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;
7
6
  backgroundColor?: string;
8
7
  render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
@@ -23,9 +22,9 @@ const Highlight: FC<PropsWithChildren<HighlightProps>> = (props) => {
23
22
  );
24
23
  };
25
24
 
26
- export default function Keywords(props: KeywordsProps) {
25
+ const KeywordsInner: FC<PropsWithChildren<KeywordsProps>> = (props) => {
27
26
  const { children, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;
28
- if (typeof children !== 'string') return children;
27
+ if (typeof children !== 'string') return <Fragment>{children}</Fragment>;
29
28
  const splitMatch = new RegExp(`${value}`, 'ig');
30
29
  const matched = children.split(splitMatch);
31
30
  return (
@@ -45,4 +44,6 @@ export default function Keywords(props: KeywordsProps) {
45
44
  })}
46
45
  </Fragment>
47
46
  );
48
- }
47
+ };
48
+
49
+ export default KeywordsInner;