react-use-howxm

Adds Howxm capabilities as custom hooks to your react project

Install

npm install --save react-use-howxm

Usage

• Initializing Howxm

import React from 'react'
import { useHowxm } from 'react-use-howxm'

const myLogger = console.info

const HowxmReadyApp = () => {
  const { initHowxm } = useHowxm()
  const appId = '<Your App ID>'

  useEffect(() => {
    initHowxm(appId, myLogger)
  }, [initHowxm])

  return <App />
}

• Identifying Customer (Identify API's rules)

import React from 'react'
import { useHowxm } from 'react-use-howxm'

const myLogger = console.info

const MyCustomComponent = () => {
  const { identifyHowxm } = useHowxm()
  const customerInfo = {
    uid: '00000001', // 用户唯一ID, 默认字段, 必填，string 类型
  }

  const handleUserInfo = (userInfo) => {
    identifyHowxm(customerInfo)
  }
}

• Check Open Campaign (Check Open API's rules)

import React from 'react'
import { checkOpenHowxm } from 'react-use-howxm'

const myLogger = console.info

const MyCustomComponent = () => {
  const { checkOpenHowxm } = useHowxm()
  const campaignId = '<You Campaign ID>'
  const uid = '00000001'

  const handlecCheckOpenCampaign = () => {
    checkOpenHowxm(
      campaignId,
      customerInfo,
      () => {
        myLogger('checkOpenHowxm success')
      },
      (data) => {
        myLogger('checkOpenHowxm faield', data)
      }
    )
  }
}

• Open Campaign (Not recommended. Open API's rules)

import React from 'react'
import { useHowxm } from 'react-use-howxm'

const myLogger = console.info

const MyCustomComponent = () => {
  const { openHowxm } = useHowxm()
  const campaignId = '<You Campaign ID>'
  const customerInfo = {
    uid: '00000001', // 用户唯一ID, 默认字段, 必填，string 类型
  }
  const extra = {
    plan: 'free',
  }

  const handleOpenCampaign = () => {
    openHowxm(campaignId, customerInfo, extra, () => {
      myLogger('openHowxm finished')
    })
  }
}

• Send Event (Event API's rules)

import React from 'react'
import { eventHowxm } from 'react-use-howxm'

const myLogger = console.info

const MyCustomComponent = () => {
  const { eventHowxm } = useHowxm()
  const eventCode = '<event code>'
  const eventAttrs = {
    plan: 'free',
    age: 17,
  }

  const handleTriggerEvent = () => {
    eventHowxm(eventCode, eventAttrs, () => {
      myLogger('triggerEvent success')
    })
  }
}

• Set extra attributes to scalable (Not recommended.setExtraAttributes API's rules)

import React from 'react'
import { setExtraAttributes } from 'react-use-howxm'

const myLogger = console.info

const MyCustomComponent = () => {
  const { setExtraAttributes } = useHowxm()
  const extraAttrs = {
    plan: 'basic',
    vip_level: '1',
  }

  const handleTriggerEvent = () => {
    setExtraAttributes(eventAttrs, myLogger)
  }
}

License

MIT © warmwind

This hook is created using create-react-hook.

This hook is inspired by react-use-hotjar.