guide-eazy - npm Package Compare versions

Comparing version 0.0.15 to 0.0.16

package.json

@@ -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阿强",

README.md

@@ -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 @@

No alert changes

Improved metrics

Total package byte prevSize

158272

increased by0.87%

Number of lines in readme file

124

increased by169.57%

No dependency changes