ybug-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    Ybug-react

    A simple wrapper of ybug.io widget to easily integrate with React applications.

    Install

    npm install --save ybug-react
    

    Usage

    Simply wrap your app within the provided YbugProvider component

    <YbugProvider ybugId="my-ybug-id" >
        <MyApp>
    </YbugProvider>

    Then in the rest of the app lifecycle, you can interact with the ybug instance by using the useYbugApi hook

    Examples

    Autofilling the Ybug forms with user infos

    import {useYbugApi} from 'ybug-react';
    
    function useUserConnection(props: {userId: string}) {
        const YbugContext = useYbugApi();
        const {data} = useUserDataFetching(props.userId);
    
        const currentUser = data?.user;
        React.useEffect(() => {
            if (currentUser && YbugContext.Ybug) {
                YbugContext.init({
                    feedback: {
                        // Autofill feedback forms with user email and name
                        email: currentUser.contact?.email ?? "",
                        name: currentUser.full_name ?? "",
                    },
                    // Make ybug use the user language
                    language_override: currentUser.language,
                    // Add custom user infos
                    user: {
                        email: currentUser.contact?.email ?? "",
                        ...
                    },
                });
            }
        }, [currentUser, YbugContext])
    }

    Programatically trigger ybug report pop-up

    import * as React from "react";
    import { useYbugApi } from "~/config/ybug/YbugContext";
    
    function ErrorPage() {
      const YbugContext = useYbugApi();
      const YbugApi = YbugContext?.Ybug;
    
      const openYbugReport = () => {
        if (YbugApi) {
          YbugApi.open("feedback");
        }
      };
    
      return (
        <div>
            <span>
                An error happened. Please contact our team
            </span>
            <button onClick={actions.openYbugReport}>
                Tell us more
            </button>
        </div>
      );
    }
    
    export { ErrorPage };

    Demo

    Edit ybug-react-usage-demo

    For more info visit https://ybug.io

    Install

    npm i ybug-react

    DownloadsWeekly Downloads

    708

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    8.72 kB

    Total Files

    5

    Last publish

    Collaborators

    • avallete