rubenmarcus / mintbase-widgets

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

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>