@the-big-whale/privy-lib
v0.2.9
Published
## How to use (browser version): - Import React and ReactDOM as scripts in your html ```xml <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.pr
Downloads
6
Readme
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 (thePrivyProvider
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 uniqueid
<div id="privy-lib_login-button">
</div>
- In a
<script>
tag, create a root withReactDOM
and use thebuild()
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 thebuild()
function: It will generate the react components from above and rendered them in the specified location (in the document), usingReactDOM.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
).