Quick Start

Isoflow can be imported as an ES6 module:

import Isoflow from "isoflow";

Basic usage

import React from 'react';
import Isoflow from 'isoflow';
 
const App = () => {
  return (
    <Isoflow />
  );
}
 
export default App;

Note: this will display a blank Isoflow editor, without icons (which is not very useful!). To initialise the editor with an iconset, see Loading Isopacks.

Dimensions of Isoflow

Isoflow takes 100% of width and height of the containing block so make sure the container in which you render Isoflow in has non-zero dimensions.

Integration with NextJS

Isoflow cannot be server-side rendered and has to be imported using next/dyanmic:

import dynamic from 'next/dynamic';
 
export const IsoflowDynamic = dynamic(() => {
    return import('isoflow');
  },
  {
    ssr: false
  }
);

import { IsoflowDynamic } from './IsoflowDynamic';
 
const App = () => {
  return (
    <IsoflowDynamic />
  );
}
 
export default App;