I'm building some components with React.FC typescript and today I found this typescript error when trying to inject styled-component props using withTheme
HOC from styled-components:
It seems that withTheme
HOC only accepts React.ComponentType
as parameter, but component was build using React.FC
(Functional Component).
Is there a way to cast React.FC
to React.ComponentType
?
UPDATE
The full component implementation:
import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import { Reset, LoadingBarStyled, SpinnerContainer } from './Style'
import { withTheme } from 'styled-components'
import ScaleLoader from 'react-spinners/ScaleLoader'
export interface ILoadingBarComponent {
progress: number
appearance?: string
onFinish(finished: Promise<string>): void
}
const LoadingBarComponent: React.FC<ILoadingBarComponent> = ({
progress = 0,
appearance = 'default',
onFinish
}) => {
useEffect(() => {
if (progress >= 100 && onFinish) {
onFinish(
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('finished')
}, 800)
})
)
}
}, [progress, onFinish])
return (
<div className="loading-bar-component-module">
<Reset />
{progress > -1 && progress < 101 && (
<>
<LoadingBarStyled progress={progress} appearance={appearance} />
<SpinnerContainer progress={progress}>
<ScaleLoader height={10} />
</SpinnerContainer>
</>
)}
</div>
)
}
LoadingBarComponent.propTypes = {
progress: PropTypes.number.isRequired,
appearance: PropTypes.string,
onFinish: PropTypes.func.isRequired
}
export default withTheme(LoadingBarComponent)