@keadex/mina-react NPM

GitHub GitHub package.json version (subfolder of monorepo)

Quick Overview

Keadex Mina React is a library that provides React components to render interactive C4 Model diagrams created with Keadex Mina.

Usage

Install

yarn add @keadex/mina-react # or npm install @keadex/mina-react

Import

!WARNING
Make sure to include also the css file from @keadex/mina-react/main.css

App.jsx

import '@keadex/mina-react/main.css'
import MinaReact from '@keadex/mina-react'

export function App() {
  return (
    <div className="w-full h-screen">
      <MinaReact
        projectRootUrl="https://raw.githubusercontent.com/keadex/keadex/main/examples/mina-react-example/demo_mina_project/Mina%20Demo"
        diagramUrl="https://raw.githubusercontent.com/keadex/keadex/main/examples/mina-react-example/demo_mina_project/Mina%20Demo/diagrams/system-context/demo-diagram"
      />
    </div>
  )
}

export default App

Props

Name	Description	Required	Default
`projectRootUrl`	URL of the Mina project's root	true
`diagramUrl`	URL of folder containing the Mina diagram	true

Configure the bundler to include WASM

The core of the Mina React component is built with WASM.

Some bundlers do not automatically include WASM files of the dependencies.

To include WASM files of the dependencies, you have to configure your bundler. In Webpack you can do the following:

webpack.config.js

const CopyPlugin = require('copy-webpack-plugin')

const config = {
  // your Webpack config
}

config.plugins.push(
    new CopyPlugin({
      patterns: [
        {
          from: 'node_modules/@keadex/mina-react/*.wasm',
          to({ context, absoluteFilename }) {
            return '[name][ext]'
          },
        },
      ],
    }),
  )

module.exports = config