Skip to content

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

License

Notifications You must be signed in to change notification settings

Ouch-Metaverse-Dao/mintbase-widgets

 
 

Repository files navigation

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/[email protected]/dist/mintbase-widgets/mintbase-widgets.esm.js" ></script>

add web component to html

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 81.0%
  • HTML 11.2%
  • CSS 7.8%