guide-eazy
Advanced tools
+1
-1
@@ -5,3 +5,3 @@ { | ||
| "types": "dist/types/index.d.ts", | ||
| "version": "0.0.15", | ||
| "version": "0.0.16", | ||
| "description": "Guide for React", | ||
@@ -8,0 +8,0 @@ "author": "闲D阿强", |
+78
-0
@@ -22,2 +22,80 @@ # Guide-Eazy - React 引导库 | ||
| ## demo | ||
| 就做两件事 | ||
| - 创建一个 Provider | ||
| ```jsx | ||
| "use client"; | ||
| import { Card } from "antd"; | ||
| import { | ||
| GuideCoreProvider, | ||
| GuideHook as GuideHookBase, | ||
| useGuideRef, | ||
| } from "guide-eazy"; | ||
| import "guide-eazy/dist/style.css"; | ||
| import { PropsWithChildren, useEffect } from "react"; | ||
| export type GuideId = "start" | "step1_1" | "step1_2" | "step1_3"; | ||
| const GuideProvider = ({ children }: PropsWithChildren) => { | ||
| const guideIns = useGuideRef(); | ||
| useEffect(() => { | ||
| guideIns.current?.drive(); | ||
| }, []); | ||
| return ( | ||
| <GuideCoreProvider<GuideId> | ||
| guideIns={guideIns} | ||
| steps={{ | ||
| showProgress: true, | ||
| steps: [ | ||
| { | ||
| id: "start", | ||
| customPopRender({ api }) { | ||
| return ( | ||
| <Card | ||
| style={{ | ||
| position: "relative", | ||
| bottom: 50, | ||
| padding: "32px", | ||
| fontSize: "30px", | ||
| fontWeight: "bold", | ||
| }} | ||
| onClick={() => { | ||
| api.setGuideIndex(1); | ||
| }} | ||
| > | ||
| 欢迎来到闲D岛🏝️ | ||
| </Card> | ||
| ); | ||
| }, | ||
| }, | ||
| ], | ||
| }} | ||
| > | ||
| {children} | ||
| </GuideCoreProvider> | ||
| ); | ||
| }; | ||
| export const GuideHook = GuideHookBase<GuideId>; | ||
| export default GuideProvider; | ||
| ``` | ||
| - 然后就是“插眼” | ||
| ```jsx | ||
| function TestNode({ id, item }: NavItemProps) { | ||
| return ( | ||
| <Button> | ||
| ... | ||
| <GuideHook readyId={"step1_1"} /> | ||
| ... | ||
| </Button> | ||
| ); | ||
| } | ||
| ``` | ||
| ## API 文档 | ||
@@ -24,0 +102,0 @@ |
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
158272
0.87%124
169.57%