@the-big-whale/privy-lib

PrivyLib

How to use (browser version):

• Import React and ReactDOM as scripts in your html

    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

• Import this module as scripts in your html

    <!-- PrivyLib Dependencies (for browser version only) -->
    <script crossorigin src="https://cdn.jsdelivr.net/npm/@the-big-whale/privy-lib@latest/dist/privy-lib.deps.js"></script>
    <!-- PrivyLib -->
    <script crossorigin src="https://cdn.jsdelivr.net/npm/@the-big-whale/privy-lib@latest/dist/privy-lib.umd.js"></script>

• Create a <div> that will host the Privy Data (the PrivyProvider from the Privy React SDK)

<div id="privy-lib_react-context-placeholder">

• Create <div>s that will host a component (as a child) from this library with a unique id

    <div id="privy-lib_login-button">
    </div>

• In a <script> tag, create a root with ReactDOM and use the build() function to instanciate any components from the library you want

    <script>
        const el = document.getElementById('privy-lib_react-context-placeholder');
        const root = ReactDOM.createRoot(el);
        root.render(PrivyLib.build([
            {
                component: "SignInButton",
                containerId: "privy-lib_login-button",
                // ...
                // additional properties -> see the component code
            },
        ], "YOUR_PRIVY_API_KEY"
        ));
    </script>

How does it works?

It is rather complicated to integrate React in an existing HTML website. In order to render React components in specific location in the document, one must use a React Portal. It allows React to choose the location of the component to be rendered (instead of the root).

This library is architectured like this:

• The folder src/components/ holds generic React components ("generic" in the sense of entirely parametric) that use Privy. They are similar to a component used in a typical React project.
• The folder src/builder/ contains the build() function: It will generate the react components from above and rendered them in the specified location (in the document), using ReactDOM.createPortal().
• The folder src/dependencies/ will compile all the dependencies required to use Privy in your project.

This project will generate 3 builds in the dist/ folder. You can use either dist/privy-lib.es.js or dist/privy-lib.umd.js (the umd one works on HTML project like Webflow) to use the builder and the components (configured by vite.config.ts), and you will need to add dist/privy-lib.deps.js to add Privy dependencies (configured by vite.config.lib.ts).