React Canny

Description

Canny.io integration for react

Installation

npm install react-canny

Usage

Feedback Widget

ℹ️ Widget component name changed from CannyWidget to CannyFeedback.

import{CannyProvider,CannyFeedback}from"react-canny";constAPP_ID="/* Your app id */";constBOARD_TOKEN="/* Tour token board */";constSSO_TOKEN="/* Your sso token */";constApp=()=>{return(<CannyProviderappId={APP_ID}><CannyFeedbackbasePath="/feedback"boardToken={BOARD_TOKEN}ssoToken={SSO_TOKEN}/></CannyProvider>);};

Change Log Widget

import{CannyProvider,CannyChangelog}from"react-canny";constAPP_ID="/* Your app id */";constLABEL_IDS=[/* Your label ids */];constApp=()=>{return(<CannyProviderappId={APP_ID}><CannyChangelogtype="button"className="change-log-button"align="top"position="left"labelIDs={LABEL_IDS}>
Change Log
</CannyChangelog></CannyProvider>);};

Also, you can customize your change log button:

constAPP_ID="/* Your app id */";constCustomButton=(props)=>{return(<button{...props}type="button"className="my-custom-button"/>);};constApp=()=>{return(<CannyProviderappId={APP_ID}><CannyChangelogcomponent={CustomButton}>
Change Log
</CannyChangelog></CannyProvider>);};

Identify & Authentication

Canny Identify is built-into the CannyProvider, and specifying the user details will trigger user identification.

import{CannyProvider}from"react-canny";constAPP_ID="/* Your app id */";constUSER={id: "/* User id */",name: "/* User name */",email: "/* User email */"};constApp=()=>{constonIdentify=()=>{/* An optional callback */};return(<CannyProviderappId={APP_ID}user={USER}onIdentify={onIdentify}/>);};

If Canny Identify isn't working and you need to generate an authenticated link yourself, use authenticateCannyLink.

import{CannyProvider,useCannyContext}from"react-canny";constAPP_ID="/* Your app id */";constUSER={id: "/* User id */",name: "/* User name */",email: "/* User email */"};constCANNY_URL='https://my-subdomain.canny.io';constApp=()=>{return(<CannyProviderappId={APP_ID}user={USER}><CannyLinkhref={CANNY_URL}>
Leave feedback
</CannyLink></CannyProvider>);};constCannyLink=({ children, href })=>{const{ canny, isLoaded }=useCannyContext();if(!isLoaded){returnnull;}return(<ahref={canny.authenticateCannyLink(href)}>{children}</a>);};