import MefiPackage from 'mefihub-package'
function App() {
return (
<MefiPackage
type={['video', 'image']}
onExportData={data => console.log(data)}
getToken={yourFunctionToGetToken}
onLogout={yourFunctionToListenLogoutEvent}
/>
)
}-
type: The modal package types that you want to use. -
onExportData: The data will returned when the Export button clicked. -
getToken: The function (async function) will call immediately, the response should be.{ "token": "string", "expiresAt": "string", "refreshToken": "string", "refreshTokenExpiresAt": "string" } -
onLogout: The function will call immediately after logout`.How to trigger logout?
import { useLogout } from 'mefihub-package' function App() { const logout = useLogout() return ( <MefiPackage type={['video', 'image']} onExportData={data => console.log(data)} getToken={yourFunctionToGetToken} onLogout={yourFunctionToListenLogoutEvent} /> ) }
Example:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Media Package</title>
<link rel="stylesheet" href="./build/dist/index.min.css" />
</head>
<body>
<div style="padding: 2rem">
<div style="display: flex; justify-content: center; align-items: center; flex-direction: column">
<div id="mefi-media-package"></div>
<button
style="margin-top: 30px; background-color: #ccc; padding: 10px; border-radius: 10px"
onclick="MFPackage.logout()"
>logout</button
>
</div>
</div>
<script src="./build/dist/index.min.js"></script>
<script>
const handleTokenCallback = async () => {
// your func here
}
const MFPackage = new $MMedia.Init({ type: ['video', 'image'] })
MFPackage.render('#mefi-media-package', {
onSubmit: function (data) {
console.log('data', data)
},
getToken: handleTokenCallback,
onLogout: () => console.log('logout called'),
})
</script>
</body>
</html>