Add property to React Typescript Interface

Question

I think I am using the correct syntax/terms, if not please let me know. I am transitioning a project to typescript and it's going ok -- The index.tsx file currently sets React.icons to an object of custom icons from the coreui library. Using typescript, Property 'icons' does not exist on type 'typeof React'.

I think I need to extend the React interface/type declaration to include icons as a typeof React.

The error is present under the first icons in React.icons = icons from the code below. If anyone can point me in the right direction, i'd be happy.

import "react-app-polyfill/ie11"; // For IE 11 support
import "react-app-polyfill/stable";
import "core-js";
import "./polyfill";
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

import store from "./store";

import { icons } from "./assets/icons";

interface IReactIcons extends React {
  icons: object;
}

React.icons = icons;

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();

Trying to add Module Augmentation below:

import "react-app-polyfill/ie11"; // For IE 11 support
import "react-app-polyfill/stable";
import "core-js";
import "./polyfill";
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

import store from "./store";

import { icons } from "./assets/icons";

declare module "react" {
  interface React {
    icons: {};
  }
}

React.icons = icons;

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister()

Is there a reason that you do not want to just use icons from import { icons } from "./assets/icons"; to render the icons when needed? Why extend react and add an icons field? — Jack Campbell
– Jack Campbell, Commented Apr 2, 2021 at 21:28
Not going to lie - I have it this way based off what I saw the makers of the icons do. If I remove the React.icons = icons then none of the icons render. — Nick McLean
– Nick McLean, Commented Apr 2, 2021 at 21:30
So it looks like React.icons is used as a global var to access the icons. I would suggest refactoring the code to import the icons when needed and render them directly on the components instead of extending React. — Jack Campbell
– Jack Campbell, Commented Apr 2, 2021 at 21:34
I think you are right, the library provides a component to use called <CIcon /> -- This component must use that global var to access the icons. — Nick McLean
– Nick McLean, Commented Apr 2, 2021 at 21:35
You need to "augment the module", see e.g. stackoverflow.com/q/46493253/3001761 — jonrsharpe
– jonrsharpe, Commented Apr 2, 2021 at 21:38

Nadia Chibrikova · Accepted Answer · 2021-04-03 17:09:21Z

1

You can't use modal augmentation because as it is stated it the docs:

You can’t declare new top-level declarations in the augmentation — just patches to existing declarations.
Default exports also cannot be augmented, only named exports

Good new is that you can use global augmentation instead

declare global {
  namespace React {
    let icons:any;
  }
}

If you know what types your icons are use it instead of any

answered Apr 3, 2021 at 17:09

Nadia Chibrikova

5,0361 gold badge18 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick McLean Over a year ago

Thank you so much! I am going to try this out! I bet this is going to do exactly what I need it to do.

Collectives™ on Stack Overflow

Add property to React Typescript Interface

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related