react-keywords 0.0.1

package/README.md

@@ -0,0 +1,102 @@
+<!--rehype:ignore:start--> 
+react-keywords
+===
+<!--rehype:ignore:end-->
+
+[![Build & Deploy](https://github.com/uiwjs/react-keywords/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-keywords/actions/workflows/ci.yml)
+[![npm version](https://img.shields.io/npm/v/react-keywords.svg)](https://www.npmjs.com/package/react-keywords)
+[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/react-keywords/file/README.md)
+
+Highlight a keyword in a piece of text and return a React element.
+
+## Installation
+
+```bash
+npm i react-keywords
+```
+
+## Basic Usage
+
+```jsx mdx:preview
+import React, { useState, Fragment } from 'react';
+import Keywords from 'react-keywords';
+
+export default function Demo() {
+  const [value, setValue] = useState('react');
+  return (
+    <Fragment>
+      <input value={value} onChange={(evn) => setValue(evn.target.value)} />
+      <Keywords value={value}>
+        Highlight a keyword in a piece of text and return a React element.
+      </Keywords>
+    </Fragment>
+  );
+}
+```
+
+## render
+
+```jsx mdx:preview
+import React, { useState, Fragment } from 'react';
+import Keywords from 'react-keywords';
+
+export default function Demo() {
+  const [value, setValue] = useState('react');
+  const highlight = (txt) => <span style={{ background: 'red', color: '#fff' }}>{txt}</span>;
+  return (
+    <Fragment>
+      <input value={value} onChange={(evn) => setValue(evn.target.value)} />
+      <Keywords value={value} render={highlight}>
+        Highlight a keyword in a piece of text and return a React element.
+      </Keywords>
+    </Fragment>
+  );
+}
+```
+
+## color
+
+```jsx mdx:preview
+import React, { useState, Fragment } from 'react';
+import Keywords from 'react-keywords';
+
+export default function Demo() {
+  const [value, setValue] = useState('react');
+  const highlight = (txt) => <span style={{ background: 'red', color: '#fff' }}>{txt}</span>;
+  return (
+    <Fragment>
+      <input value={value} onChange={(evn) => setValue(evn.target.value)} />
+      <Keywords value={value} color="red" backgroundColor="">
+        Highlight a keyword in a piece of text and return a React element.
+      </Keywords>
+    </Fragment>
+  );
+}
+```
+
+## API
+
+```ts
+export interface KeywordsProps {
+  value?: string;
+  children?: string;
+  color?: string;
+  backgroundColor?: string;
+  render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
+}
+export default function Keywords(props: KeywordsProps): JSX.Element | undefined;
+```
+
+## Contributors
+
+As always, thanks to our amazing contributors!
+
+<a href="https://github.com/uiwjs/react-keywords/graphs/contributors">
+  <img src="https://uiwjs.github.io/react-keywords/CONTRIBUTORS.svg" />
+</a>
+
+Made with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).
+
+### License
+
+Licensed under the MIT License.

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "react-keywords",
+  "version": "0.0.1",
+  "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>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uiwjs/react-keywords"
+  },
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "scripts": {
+    "watch": "tsbb watch",
+    "build": "tsbb build",
+    "test": "tsbb test --env=jsdom",
+    "coverage": "tsbb test --env=jsdom --coverage --bail"
+  },
+  "keywords": [
+    "react",
+    "react-keywords",
+    "highlight",
+    "keywords"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,48 @@
+import { FC, Fragment, PropsWithChildren, useMemo } from 'react';
+
+export interface KeywordsProps {
+  value?: string;
+  children?: string;
+  color?: string;
+  backgroundColor?: string;
+  render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
+}
+
+interface HighlightProps extends KeywordsProps {}
+const Highlight: FC<PropsWithChildren<HighlightProps>> = (props) => {
+  const { children, value, color, backgroundColor, render } = props;
+  const child = useMemo(
+    () => (render ? render(value!, color!, backgroundColor!) : <span style={{ color, backgroundColor }}>{value}</span>),
+    [color, backgroundColor, value],
+  );
+  return (
+    <Fragment>
+      {children}
+      {value && child}
+    </Fragment>
+  );
+};
+
+export default function Keywords(props: KeywordsProps) {
+  const { children, color = 'inherit', backgroundColor = '#ffff00', value, render } = props;
+  if (typeof children !== 'string') return children;
+  const splitMatch = new RegExp(`${value}`, 'ig');
+  const matched = children.split(splitMatch);
+  return (
+    <Fragment>
+      {matched.map((item, idx) => {
+        return (
+          <Highlight
+            key={idx}
+            color={color}
+            value={matched.length > idx + 1 ? value : undefined}
+            render={render}
+            backgroundColor={backgroundColor}
+          >
+            {item}
+          </Highlight>
+        );
+      })}
+    </Fragment>
+  );
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig",
+  "include": ["src", ".kktrc.ts"],
+  "compilerOptions": {
+    "outDir": "./cjs",
+    "baseUrl": ".",
+    "noEmit": false
+  }
+}