Installation

Using npm:

npm install --save vdiarybook-lib

Using yarn:

yarn add vdiarybook-lib

Import package

Import the package's style (required):

import "vdiarybook-lib/dist/style.css";

Components

1. Vdiarybook

This is the required context to verify your key, and to use components in package.

Props:

type VdiarybookProps = {
  privateKey: string;
  children: ReactNode;
};

Example:

import { Vdiarybook } from "vdiarybook-lib";

function App() {
  return (
    <Vdiarybook privateKey="<Your private key>">
      // ...Your components
    </Vdiarybook>
  );
}

2. Captcha

This component able to show a modal with answer questions and choose images to verify:

Props:

type CaptchaProps = {
  user_id?: string; // deprecated
  captchaId?: string;
  className?: string;
  show?: boolean;
  header?: ReactNode;
  notification?: (m: string) => ReactNode;
  onClose?: () => void;
  onSubmit?: (e: CaptchaSubmit) => void;
};

Example:

Show captcha

import { useState } from "react";
import { Captcha } from "vdiarybook-lib";

function App() {
  const [show, setShow] = useState(false);

  return <Captcha show={show} />;
}

Custom header and toast

import { Captcha } from "vdiarybook-lib";

function YourHeader() {
  return <div>This is your header</div>;
}

function YourToast({ message }: { message: string }) {
  return <div>This is your toast</div>;
}

function App() {
  return (
    <Captcha
      header={<YourHeader />}
      notification={(e: string) => <YourToast message={e} />}
    />
  );
}

Actions: Close, Submit

import { useState } from "react";
import { Captcha } from "vdiarybook-lib";

function App() {
  function handleClose() {
    // do something
  }

  function handleSubmit(e: {
    type: "question" | "image";
    response_type: "error" | "success";
  }) {
    // do something
  }

  return <Captcha show={show} onClose={handleClose} onSubmit={handleSubmit} />;
}