Type error with React 18 and TypeScript

[Egor-Koldasov]

Sample code

import ReactAvatar, { ConfigProvider } from "react-avatar";

const allowedColors: string[] = ["#ffffff", "#000000"];
export default function App() {
  return (
    <div className="App">
      <ConfigProvider colors={allowedColors}>
        <ReactAvatar name="Egor Koldasov" />
      </ConfigProvider>
    </div>
  );

ConfigProvider throws an error

Type '{ children: Element; colors: string[]; }' is not assignable to type 'IntrinsicAttributes & ConfigProvider'.
  Property 'children' does not exist on type 'IntrinsicAttributes & ConfigProvider'.

Sandbox example

https://codesandbox.io/s/heuristic-wing-jt95g8?file=/src/App.tsx

Example versions

"dependencies": {
    "react": "18.2.0",
    "react-avatar": "5.0.3",
    "react-dom": "18.2.0",
  },
  "devDependencies": {
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.9",
    "typescript": "4.4.2"
  },

[hhoangg]

I have the same problem

[atefBB]

@Egor-Koldasov did u manage to solve this issue ? any help will be appreciated !

[okradze]

I have same issue

[renebigot]

Same issue here

[renebigot]

For future readers : You can fix this lint error with a comment.

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    { /* @ts-expect-error : ConfigProvider has no children property in interface declaration */}
    <ConfigProvider colors={AVATAR_COLORS}>
      <App />
    </ConfigProvider>
  </React.StrictMode>
)

[TannerJuby1]

@renebigot that is not a "fix", that is a workaround.