React

Here’s an example using the ES module in a React component.

Add the library using npm/yarn/pnpm

npm add -D @trebco/treb

npm add -D @trebco/treb

In a react component, import the TREB global instance and call CreateSpreadsheet when the component is mounted

import React from 'react';

// import TREB module
import { TREB, 
  type EmbeddedSpreadsheetOptions } from '@trebco/treb';

class SpreadsheetComponent extends React.Component<{ 
    options?: EmbeddedSpreadsheetOptions }> {

  // reference to our DOM node
  public container: React.RefObject<HTMLDivElement>;
  
  constructor(props) {
    super(props);
    this.container = React.createRef();
  }

  public componentDidMount() {
    const options: EmbeddedSpreadsheetOptions = 
      this.props.options || {};

    TREB.CreateSpreadsheet({ 
      ...options,
      container: this.container.current,
    });
  }

  public render() {
    return (
      <div ref={this.container}></div>
    );
  }
}

export default SpreadsheetComponent;

import React from 'react';

// import TREB module
import { TREB, 
  type EmbeddedSpreadsheetOptions } from '@trebco/treb';

class SpreadsheetComponent extends React.Component<{ 
    options?: EmbeddedSpreadsheetOptions }> {

  // reference to our DOM node
  public container: React.RefObject<HTMLDivElement>;
  
  constructor(props) {
    super(props);
    this.container = React.createRef();
  }

  public componentDidMount() {
    const options: EmbeddedSpreadsheetOptions = 
      this.props.options || {};

    TREB.CreateSpreadsheet({ 
      ...options,
      container: this.container.current,
    });
  }

  public render() {
    return (
      <div ref={this.container}></div>
    );
  }
}

export default SpreadsheetComponent;