@ chartapi/ 反应连接

安装

npm install --save @chartapi/react-connect

使用量

import React, { useState } from 'react';
import { useChartConnect } from '@chartapi/react-connect';

const App = () => {
  const [code, setCode] = useState(null);

  const onSuccess = ({ code }) => setCode(code);
  const onError = ({ errorMessage }) => console.error(errorMessage);
  const onClose = () => console.log('User exited Chart Connect');

  const { open } = useChartConnect({
    clientId: '<your-client-id>',
    // zIndex: 999,
    // sessionSettingsId: '<your-session-settings-id>', // optional; if provided, will prefill information in the form
    // flow: 'irs-8821', // optional; if provided, will set the flow to the specified flow override the master settings
    // providers: ['irs', 'ssa'], // optional; if provided, will set the providers to the specified providers override the master 
    // overlay: `rgba(199,201,199,0.5)` // optional; if provided, will set the overlay to the specified overlay CSS attribute
    // metadata: { userId: '123', source: 'web' }, // optional; any JSON object that will be passed as a stringified query parameter

    onSuccess,
    onError,
    onClose,
  });

  return (
    <div>
      <header>
        <p>Code: {code}</p>
        <button type="button" onClick={() => open()}>
          Open Chart Connect
        </button>
      </header>
    </div>
  );
};

高级使用

传递元数据

您可以通过自定义元数据作为JSON对象,该对象将作为字符串化的查询参数包含. 用于跟踪连接会话的其他上下文:

const { open } = useChartConnect({
  clientId: '<your-client-id>',
  metadata: {
    userId: '12345',
    source: 'dashboard',
    campaign: 'spring-2024',
  },
  onSuccess,
  onError,
  onClose,
});

说明: 元数据对象为JSON字符串并被作为URL搜索参数通过. 避免传递大对象或非序列值(如函数,循环引用).