doc: update bundle example.

uiwjs · Aug 2, 2022 · d1a95c4 · d1a95c4
1 parent 1402fbe
commit d1a95c4
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 6 deletions.
diff --git a/core/README.md b/core/README.md
@@ -3,7 +3,7 @@ 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)
+[![CI](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)
 
@@ -34,6 +34,40 @@ export default function Demo() {
 }
 ```
 
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="https://unpkg.com/@babel/[email protected]/babel.min.js" crossorigin></script>
+    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/@uiw/codepen-require-polyfill/index.js" crossorigin></script>
+  </head>
+  <body>
+    <div id="container" style="padding: 24px"></div>
+    <script src="https://unpkg.com/react-keywords/dist/keywords.min.js"></script>
+    <script type="text/babel">
+      import Keywords from 'react-keywords';
+
+      function Demo() {
+        const [value, setValue] = React.useState('react');
+        return (
+          <React.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>
+          </React.Fragment>
+        );
+      }
+      const container = document.getElementById('container');
+      const root = ReactDOM.createRoot(container);
+      root.render(<Demo />);
+    </script>
+  </body>
+</html>
+```
+
 ## render
 
 ```jsx mdx:preview

diff --git a/www/public/bundle.html b/www/public/bundle.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <script src="https://unpkg.com/@babel/standalone@7.17.5/babel.min.js" crossorigin></script>
-    <script src="https://unpkg.com/react@17.x/umd/react.development.js" crossorigin></script>
-    <script src="https://unpkg.com/react-dom@17.x/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://unpkg.com/@babel/standalone@7.18.10/babel.min.js" crossorigin></script>
+    <script src="https://unpkg.com/react@18.x/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18.x/umd/react-dom.development.js" crossorigin></script>
     <script src="https://unpkg.com/@uiw/codepen-require-polyfill/index.js" crossorigin></script>
     <title>Keywords Highlight for React.</title>
     <meta name="keywords" content="react,component,keyword,highlight" />
@@ -27,8 +27,9 @@
           </React.Fragment>
         );
       }
-
-      ReactDOM.render(<Demo />, document.getElementById('container'));
+      const container = document.getElementById('container');
+      const root = ReactDOM.createRoot(container);
+      root.render(<Demo />);
     </script>
   </body>
 </html>