feat: add caseIgnored props.

core/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

core/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}
           >