@mintgate/react-mintgate

@mintgate/react-mintgate

This is a widget library for React for creating and viewing token protected content.

Install:

yarn add @mintgate/react-mintgate

How to Get Your Widget Token:

1. Log into the MintGate Site: https://www.mintgate.app/login
2. Go to https://www.mintgate.app/token_api or https://www.mintgate.app/developer and click on the Get Token Keys button.
3. You will need to copy your Widget Token and pass the value as a key to the jwttoken parameter (for Token gating form and List/Grid of token gated links by token).
4. You will also need your userID (for List/Grid of token gated links by user only).

Widget currently available:

1. Token gating form (form to set up a token gate on a link)
2. List/Grid of token gated links on MintGate platform by token
3. List/Grid of token gated links on MintGate platform by user
4. Token Profile

In React project:

Form to set up token gated links:

Required prop:

• jwttoken (string - your jwt token)

Optional prop:

• theme (string - one of our 16 themes)

import '@mintgate/react-mintgate/dist/lib.css'
import { TPPFormWidget} from '@mintgate/react-mintgate';

function App() {
  return (
    <div className="App">
      <TPPFormWidget jwttoken="yourjwttoken" theme='oneofourthemes'/>
    </div>
  );
}

export default App;

List of Token Gated Links by Token:

Required prop:

• tokentid (string - token address)

Optional prop:

• theme (string - one of our 16 themes)

import '@mintgate/react-mintgate/dist/lib.css'
import { TPPLinkList} from '@mintgate/react-mintgate';

function App() {
  return (
    <div className="App">
      <TPPLinkList tokentid='yourtokenaddress' theme='oneofourthemes'/>
    </div>
  );
}

export default App;

Grid of Token Gated Links by Token:

Required prop:

• tokentid (string - token address)

Optional prop:

• theme (string - one of our 16 themes)
• breakpoints for number of columns

• base = default
• lg = 1200px
• md = 800px
• sm = 600px
• xs = 500px

import '@mintgate/react-mintgate/dist/lib.css'
import { TPPLinkGrid} from '@mintgate/react-mintgate';

function App() {
  return (
    <div className="App">
      <TPPLinkGrid base="4" lg="3" md="2" sm="1" xs="1" tokentid='yourtokenaddress' theme='oneofourthemes'/>
    </div>
  );
}

export default App;

List of Token Gated Links by User:

Required prop:

• userid (number - id of user)
• jwttoken (string - your jwt token)

Optional prop:

• theme (string - one of our 16 themes)

import '@mintgate/react-mintgate/dist/lib.css'
import { TPPLinkListUsers} from '@mintgate/react-mintgate';

function App() {
  return (
    <div className="App">
      <TPPLinkListUsers 
      userid='youruserid'
      jwttoken='yourjwttoken' theme='oneofourthemes'/>
    </div>
  );
}

export default App;

Grid of Token Gated Links by User:

Required prop:

• userid (number - id of user)
• jwttoken (string - your jwt token)

Optional prop:

• theme (string - one of our 16 themes)
• breakpoints for number of columns

• base = default
• lg = 1200px
• md = 800px
• sm = 600px
• xs = 500px

import '@mintgate/react-mintgate/dist/lib.css'
import { TPPLinkGridUsers} from '@mintgate/react-mintgate';

function App() {
  return (
    <div className="App">
      <TPPLinkGridUsers 
      userid='youruserid'
      base="4" lg="3" md="2" sm="1" xs="1"
      jwttoken='yourjwttoken'
      theme='oneofourthemes'/>
    </div>
  );
}

export default App;

Token Profile:

Required prop: tokenName (string - name of token)

Optional prop: body (true/false boolean - true show the profile info, false hides the profile info and only shows photo)

import '@mintgate/react-mintgate/dist/lib.css'
import { TokenProfile} from '@mintgate/react-mintgate';

function App() {
  return (
    <div className="App">
      <TokenProfile
      tokenName="yourtokentid" body={true/false} />
    </div>
  );
}

export default App;

Optional - You can add any of the following style themes as a value to the theme parameter:

• aqua
• black
• bumblebee
• cupcake
• cyberpunk
• dark
• dracula
• fantasy
• forest
• garden
• halloween
• light (default)
• luxury
• pastel
• retro
• synthwave
• valentine

Example project in the repo: /examples/helloworld

---

Internal: to build a new NPM version

yarn build
yarn publish