@digitalc/nudges v0.0.6

Nudges Web

React 18 supported Nudges Component.

Development

npm install
npm start
open http://localhost:8000

Feature

• React life cycle support Nudges component

Install

npm i @digitalc/nudges

Usage

import { Nudges } from '@digitalc/nudges';

const Demo = () => {

  // 或者不用 useRef ，传一个唯一标识 来获取 DOM 元素。
  const createBtnRef = useRef<HTMLButtonElement>(null);
  const updateBtnRef = useRef<HTMLButtonElement>(null);
  const deleteBtnRef = useRef<HTMLButtonElement>(null);
  // 如果调用方有自己的逻辑
  const [isTourActive, setIsTourActive] = useState(true);

  useEffect(() => {
      if (isTourActive) {
      // 启动并注册一个 Nudges
      const stopTourFunction = Nudges('Nudges-container', {
        closeIcon:'关闭',
        defaultCurrent: 0,
        animated: true,
        arrow: true,
        steps: [
          {
            title: '创建',
            description: '创建一条数据',
            target: () => document.getElementById('testNudge'),
            mask: true,
          },
          {
            title: '更新',
            mask: false,
            // target: () => updateBtnRef.current,
            // target: () =>  document.getElementsByClassName('testNudge2')[0],
            target: () => document.querySelector('[data-cee-id="testNudge2"]'),
            description: (
              <div>
                <span>更新一条数据</span>
                <button>帮助文档</button>
                <img
                alt="Nudges.png"
                width={100}
                src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
              />
              </div>
            ),
            cover: (
              <img
                alt="Nudges.png"
                src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
              />
            ),
          },
          {
            title: '删除',
            description: (
              <div>
                <span>危险操作：删除一条数据</span>
                <button>帮助文档</button>
              </div>
            ),
            // target: () => deleteBtnRef.current,
            target: () =>  document.getElementById('testNudge3'),
            mask: {
              style: {
                boxShadow: 'inset 0 0 15px #fff',
              },
              color: 'rgba(243, 23, 3, 0.78)',
            },
          },
        ],
        props: { text: 'Default text' },
        onChange: (current, next) => {
          console.log('onChange', current, next);
        },
        onFinish: () => {
          console.log('onFinish');
        }
      });
      // 清理函数，用于组件卸载时停止 Nudges
      return () => {
        console.log("🚀 ~ 清理函数，用于组件卸载时停止 Nudges:")
        stopTourFunction(); // 停止 Nudges
      };
    }
  }, [isTourActive]);


   // 处理点击事件来启动和停止 Nudges
 const handleToggleTour = () => {
  setIsTourActive(!isTourActive);
};

    return (
        <div style={{ margin: 20 }}>
            <div>
                <button
                    className="ant-target"
                    id="testNudge"
                    // ref={createBtnRef}
                    style={{ marginLeft: 100 }}
                >
                    Create1
                </button>
                {/* <div style={{ height: 200 }} /> */}
                <button
                    className="ant-target testNudge2"
                    // ref={updateBtnRef}
                    id="testNudge2"
                >
                    Update2
                </button>

                <img
                    data-cee-id="testNudge2"
                    alt="tour.png"
                    width={400}
                    height={100}
                    src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
                />
                <button
                    className="ant-target"
                    // ref={deleteBtnRef}
                    id="testNudge3"
                >
                    Delete3
                </button>
                </div>

            <div style={{ height: 200 }} />
        </div>
    );
};

export default Demo;

🔥 API

We use typescript to create the Type definition. You can view directly in IDE. But you can still check the type definition here.

Nudges

NudgesStep