React

Basics

Installing Widgets

Each widget comes with a Javascript and CSS file. To add a widgets to your website, you will need to add its corresponding Javascript and CSS to the public/index.html of the react app.

Example:

<head>
  ...
  <!--
    Manifold Widgets
  -->
  <script src="https://connect.manifoldxyz.dev/latest/connect.umd.js"></script>
  <link rel="stylesheet" href="https://connect.manifoldxyz.dev/latest/connect.css">
  ....
</head>

The uri for the Javascript and CSS for each widget is as follows:

https://<WIDGET_NAME>.manifoldxyz.dev/<WIDGET_VERSION>/<WIDGET_NAME>.umd.min.js
https://<WIDGET_NAME>.manifoldxyz.dev/<WIDGET_VERSION>/<WIDGET_NAME>.css

You can find a list of widgets, versions and links here.

Using Widgets

To use a widget, simply add a <div> into each react component you wish to use it in.

Example:

function ManifoldConnect() {
  return (
    <div className="ManifoldConnect">
      <div  
        data-widget="m-connect"
        data-grant-type="<your app grant type, `signature` or `token`>"
        data-client-id="<your app client id>"  
        data-app-name="<your app name>"  
        data-network="<your desired network's chain id>"
      >
      </div>
    </div>
  );
}

You can find a list of widgets, versions and links here.

Styling

Widgets are styled using standard CSS.

Some widgets may include links pointing to additional stylesheets. These additional stylesheets (usually named <WIDGET_NAME>.manifold-light.css or <WIDGET_NAME>.manifold-dark.css) build on top of the base stylesheet (usually named <WIDGET_NAME>.css), thus the additional stylesheets should be included after the base one.

Examples

Examples of commonly used features can be found here. Please feel free to use this as a starting point to building your own dApp.

Last updated