react-use-howxm
v1.1.1
Published
Adds Howxm capabilities as custom hooks
Downloads
4
Readme
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.