Tango UI

0.0.2

tango-pdf-cw is a media preview library for permission control. The usePreview hook function is used for the safe display of restricted resources (such as PDF, images, documents, etc.). It determines whether access to resources is allowed by detecting the user role, whether the token is valid, and the resource expiration time, and provides clear access status (such as hasAccess, errorType, etc.) to facilitate the UI to make corresponding processing.

When access fails, the errorType field will provide the reason for the failure (such as missing Token, insufficient permissions, or Token expired), and a callback function will be provided, which can be used to prompt the user or jump to the login page, etc.

<PDFViewer /> The tag is used to quickly display media files, and the display style can be adjusted through the sx attribute, etc.

How to use?

1.Installation

npm i tango-pdf-cw

2.Import

import { usePreview, PDFViewer } from "tango-pdf-cw";

3.Use

// react
import { useState } from "react";
import { usePreview, PDFViewer } from "tango-pdf-cw";
import { Button, useNotice } from "tango-ui-cw";
import pdftest from "@/assets/yourpdf.pdf";

function Demo() {
  const [role, setRole] = useState("admin");
  const [token, setToken] = useState("123");
  const notice = useNotice();

  const { finalUrl, errorType } = usePreview({
    src: pdftest,
    token: token,
    userRole: role,
    allowRoles: ["admin"],
    onAuthFail: (errorType) => {
      console.log("error,reason:", errorType);
    },
  });

  if (errorType === "NO_TOKEN") return notice.fail('no token');
  if (errorType === "ROLE_FORBIDDEN") return notice.fail('no access');
  if (errorType === "EXPIRED") return notice.fail('the token has expired');

  return (
    <>
      <PDFViewer src={finalUrl} sx={{ h: 800 }} />
    </>
  );
}

export default Demo;

PDF Demo

Currently role: Admin

usePreview Tokens

Token	Type	Accepted Values	Description	Default
finalUrl	String	String	the returned file address	-
hasAccess	Boolean	true \| false	whether you have the relevant permissions	false
errorType	String \| null	"NO_TOKEN" \| "ROLE_FORBIDDEN" \| "EXPIRED" \| null	error label	-

usePreview Props

Prop	Type	Accepted Values	Description	Default
src	String	String	the address of the source file	-
token	String	String	token	-
userRole	String	String	the user role obtained	-
allowRoles	String[]	String[]	role arrays, which can write one or more roles, can be accessed by the characters located in the array	-
expiresAt	String	tString	token expiration time	-
onAuthFail	(errorType: string) => void	-	a callback function that is triggered when authentication fails, with parameters of error type (such as 'NO_TOKEN', 'ROLE_FORBIDDEN', etc.).	-

PDFViewer Props

Prop	Type	Accepted Values	Description	Default
src	String	String	the address of the source file	-
sx	Object	Object	Inline styles for customizing appearance. Note: Inline styles defined via the "style" prop take precedence over "sx".	{}
className	String	String	Custom CSS class name(s).	-