Envoy-toolkit-react NPM

Installation

You can install envoy js toolkit with NPM, Yarn, or a good ol' via unpkg.com.

NPM

$ npm i @envoy/envoy-toolkit-react
## or
$ yarn add @envoy/envoy-toolkit-react

CDN

If you're not using a module bundler or package manager we also have a global ("UMD") build hosted on the unpkg.com CDN. Simply add the following tag to the bottom of your HTML file:

<link rel="stylesheet" href="https://unpkg.com/envoy-toolkit-core@latest/dist/index.css" />
<script src="https://unpkg.com/envoy-toolkit-react@latest/dist/index.umd.js"></script>

Quick start

1. Import toolkit components

import 'envoy-toolkit-core/dist/index.css'
import { EnvoyToolKit } from '@envoy/envoy-toolkit-react'

2. Initialize a toolkit

const apiKey = '<Api-Key>' // you cand find it in Account -> Security -> Api key

EnvoyToolKit.init({
  apiKey,
  sandbox: true // if you need to use sandbox envinronment
})

3. Use in JSX

Usage examples:

const ShareIcon = () => (
  <svg
    className='env-inline-block'
    width={24}
    height={24}
    viewBox='0 0 24 24'
    preserveAspectRatio='none'
    fill='none'
    xmlns='http://www.w3.org/2000/svg'
  >
    <g opacity='0.5'>
      <path
        d='M10 5H6C5.44772 5 5 5.44772 5 6V18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V14'
        stroke='rgb(16, 185, 129)'
        strokeWidth={2}
        strokeLinecap='round'
        strokeLinejoin='round'
      />
      <path d='M20 9L20 4H15' stroke='rgb(16, 185, 129)' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
      <path d='M13 11L20 4' stroke='rgb(16, 185, 129)' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
    </g>
  </svg>
)

const CustomShareComponent: FC<EnvoyShareComponentChildInjectedProps> = ({ onClick, isLoading }) => {
  return isLoading ? (
    <div>Loading</div>
  ) : (
    <a href='/#' onClick={onClick}>
      Gift button
    </a>
  )
}

const App = () => {
  return (
    <div>
      <div>
        {/* VARIANT 1 */}
        <EnvoyShareComponent
          config={{
            userId: 'some-user-id',
            contentConfig: {
              contentType: ContentType.Video,
              contentId: 'some-content-id',
              contentName: 'content name',
              contentDescription: 'contentDescription'
            }
          }}
        >
          {(shareProps) =>
            shareProps.isLoading ? (
              <span>Loading</span>
            ) : (
              <a onClick={shareProps.onClick as any} className='envoy-shareLink' href='/#'>
                <ShareIcon />
                Gift button provided by User
              </a>
            )
          }
        </EnvoyShareComponent>
      </div>
      {/* VARIANT 2 */}
      <div>
        <EnvoyShareComponent
          config={{
            userId: 'some-user-id',
            contentConfig: {
              contentType: ContentType.Video,
              contentId: 'some-content-id',
              contentName: 'content name',
              contentDescription: 'contentDescription'
            }
          }}
        />
      </div>
      {/* VARIANT 3 */}
      <div>
        <EnvoyShareComponent
          config={{
            userId: 'some-user-id',
            contentConfig: {
              contentType: ContentType.Video,
              contentId: 'some-content-id',
              contentName: 'content name',
              contentDescription: 'contentDescription'
            }
          }}
        >
          <CustomShareComponent />
        </EnvoyShareComponent>
      </div>

      <div style={{ height: '10000px' }} />
    </div>
  )
}

Vanilla js usage example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="https://unpkg.com/envoy-toolkit-core@latest/dist/index.css" />
</head>
<body>

<div id="envoy-gift-button"></div>

<!--<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>-->
<!--<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>-->
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/envoy-toolkit-core@latest/dist/index.umd.js"></script>
<script src="https://unpkg.com/envoy-toolkit-react@latest/dist/index.umd.js"></script>
<script>
  const apiKey =
    "eyJhbGciOiJIUzUxMiJ9.eyJpYXQiOjE2NTQwODc5NzksImlzcyI6IkVudm95IFBsYXRmb3JtIiwianRpIjoiY2YwMmEyZmYtNjExOC00YWFmLWEzMzAtNzM2MjlhOTc4YjU2IiwibGlua19xdW90YSI6MTAwLCJvcmdfbmFtZSI6ImxpdHZhbiIsInNhbmRib3hfbGlua19xdW90YSI6MTAwfQ.-i4hman1hsOR2ybBXViZNb4pwnGZ3tE1u4b60keYHKUj4WA6Nmn23l4toTHbr9mNW4fR1FTYbffBuvvWFMbgwQ";
  const { EnvoyToolkitCore, ContentType, EnvoyShareComponent } = envoyToolkitReact;
  EnvoyToolkitCore.init({
    apiKey,
    sandbox: true
  });

  const container = document.getElementById("envoy-gift-button");
  const root = ReactDOM.createRoot(container);
  root.render(React.createElement(EnvoyShareComponent, {
    config: {
      userId: "some-user-id",
      contentConfig: {
        contentType: ContentType.Video,
        contentId: "some-content-id",
        contentName: "content name",
        contentDescription: "contentDescription"
      }
    }
  }));

</script>

</body>
</html>

clsx envoy-client-partner-sdk envoy-toolkit-core flowbite mixpanel-browser react react-dom

@infinitebrahmanuniverse/nolb-env @everything-registry/sub-chunk-1590 @zalastax/nolb-env

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago