Build an Excel add-in using React

In this article, you'll walk through the process of building an Excel add-in using React and the Excel JavaScript API.

Prerequisites

If you haven't done so previously, you'll need to install the following tools:

1- Install Create React App globally.

npm install -g create-react-app

2- Install Yeoman and the Yeoman generator for Office Add-ins globally.

npm install -g yo generator-office

Generate a new React app

Use Create React App to generate your React app. From the terminal, run the following command:

create-react-app my-addin

Generate the manifest file and sideload the add-in

Each add-in requires a manifest file to define its settings and capabilities.

1- Navigate to your app folder.

cd my-addin

2- Use the Yeoman generator to generate the manifest file for your add-in. Run the following command and then answer the prompts as shown in the following screenshot:

yo office

Yeoman generator

Note: If you're prompted to overwrite package.json, answer No (do not overwrite).

3- Open the manifest file (i.e., the file in the root directory of your app with a name ending in "manifest.xml"). Replace all occurrences of https://localhost:3000 with http://localhost:3000 and save the file.

4- Follow the instructions for the platform you'll be using to run your add-in and sideload the add-in within Excel.

Update the app

1- Open public/index.html, add the following <script> tag immediately before the </head> tag, and save the file.

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

2- Open src/index.js, replace ReactDOM.render(<App />, document.getElementById('root')); with the following code, and save the file. 

const Office = window.Office;

Office.initialize = () => {
  ReactDOM.render(<App />, document.getElementById('root'));
};

3- Open src/App.js, replace file contents with the following code, and save the file. 

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.onColorMe = this.onColorMe.bind(this);
  }

  onColorMe() {
    window.Excel.run(async (context) => {
      const range = context.workbook.getSelectedRange();
      range.format.fill.color = 'green';
      await context.sync();
    });
  }

  render() {
    return (
      <div id="content">
        <div id="content-header">
          <div className="padding">
              <h1>Welcome</h1>
          </div>
        </div>
        <div id="content-main">
          <div className="padding">
              <p>Choose the button below to set the color of the selected range to green.</p>
              <br />
              <h3>Try it out</h3>
              <button onClick={this.onColorMe}>Color Me</button>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

4- Open src/App.css, replace file contents with the following CSS code, and save the file. 

#content-header {
    background: #2a8dd4;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; 
    overflow: hidden;
}

#content-main {
    background: #fff;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto; 
}

.padding {
    padding: 15px;
}

Try it out

1- From the terminal, run the following command to start the dev server.

npm start

2- In Excel, choose the Home tab, and then choose the Show Taskpane button in the ribbon to open the add-in task pane.

Excel Add-in button

3- In the task pane, choose the Color Me button pane to set the color of the selected range to green.

Excel Add-in

Next steps

Congratulations, you've successfully created an Excel add-in using React! Next, learn more about the core concepts of building Excel add-ins.

Additional resources

aScript API reference