Nomming Peanut M&M's

    TypeScript icon, indicating that this package has built-in type declarations

    0.0.2 • Public • Published

    Ricardian Contract React Component

    This is react dependency used for rendering ricardian contracts inside react application.

    The dependency allows you to use any component framework and render the ricardian contract directly into your application1

    You can find the example here:

    The Ricardian contract exposes the following interface:

            LoadingIndicator={<ProgressIndicator />}
            signingSuccessCallback={() => { 
                // Do something when contract is accepted 
            signingErrorCallback={(msg) => {
                // Handle errors, the msg contains the eror message


    export interface RicardianContractProps {
        arweaveTx: string,
        provider: provider,
        LoadingIndicator: React.ReactNode,
        useReverseGeocoding: boolean,
        AcceptButton: React.ReactNode,
        signingSuccessCallback: SigningSuccessCallback,
        signingErrorCallback: SigningErrorCallback,


    You can pass in any JSX element to render as loading indicator while the contract is loading


    The transaction ID of the Arweave transaction containing the Ricardian Contract. You can get this from Ricardian Fabric


    Pass in any button element to render. The Ricardian Contract component will overlay this button element and listen for click events on the overlay so any component will do.


    Pass in any function to call when a contract has been accepted


    Pass a callback to this prop, It will be called when errors occur


    The Provider is a valid web3 provider from web3-core. For example you can use window.ethereum. The component uses this provider to initialize web3.js internally.


    The built in decentralized reverse geocoder is useful for blocking countries from signing the app, but only client side. You can determine the location of a browser from the coordinates from the geolocaiton API.


    You can find the working example here:


    When developing you can link this dependency using npm link to an external application created with create-react-app.

    When making changes run npm run build to rebuild the dependency and it will refresh in the other react project too

    You might run into this error:

    Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
        You might have mismatching versions of React and the renderer (such as React DOM)
        You might be breaking the Rules of Hooks
        You might have more than one copy of React in the same app See react-invalid-hook-call for tips about how to debug and
    fix this problem

    I was able to fix this by making my app and library point to the same react (package) location.

    Below are the steps I followed :

    1. In Your Application: a) cd node_modules/react && npm link b) cd node_modules/react-dom && npm link

    2. In Your Library a) npm link react b) npm link react-dom

    3)Stop your dev-server and do npm start again.

    This Error Does not appear when importing the dependency from NPM.

    Bug Reports

    Please open an issue if you find any problems with this dependency so it can be resolved ASAP. Thank!


    npm i @ricardianfabric/react-components

    DownloadsWeekly Downloads






    Unpacked Size

    147 kB

    Total Files


    Last publish


    • strawberrychocolatefudge