/mintbase-widgets

Mintbase Widgets (web components) built on top of Stencil.js

Primary LanguageTypeScriptMIT LicenseMIT

Built With Stencil

Mintbase Widgets

This is a on-going project where you can load components straight from Mintbase and Near.

Components

My Nft Collection

This is the widget to showcase your NFT Collection @ NEAR Blockchain.

live example:

https://rub3n.xyz/

props:

  • user: mandatory
  • theme: optional: 'dark'

install on react

In the present moment React only working with pure React Webpack, not working with Vite.

npm install mintbase-widgets-react

import { MyNftCollection } from 'mintbase-widgets-react';
<MyNftCollection user={yourNearAccount} theme="dark">

next.js

  • install npm install mintbase-widgets

  • add this code to app.tsx

import { applyPolyfills, defineCustomElements } from 'mintbase-widgets/loader'

  useLayoutEffect(() => {
    applyPolyfills().then(() => {
      defineCustomElements(window)
    })
  }, [])
  • add to global.d.ts
declare namespace JSX {
  interface IntrinsicElements {
      'my-nft-collection': { 'user': string , 'theme': string};
  }
}
  • use it:
    <my-nft-collection user="your near username wallet" theme="dark"></my-nft-collection>

use with vanillajs and html

add script tag on head:

<script type='module' src="https://unpkg.com/mintbase-widgets@0.0.8/dist/mintbase-widgets/mintbase-widgets.esm.js" ></script>

add web component to html

<my-nft-collection user={yourNearAccount} theme="dark"></my-nft-collection>