react-shimmer-effect
react-shimmer-effect copied to clipboard
Usage with Typescript
Hi there I'm a native mobile engineer (iOS / Android), so forgive me if the question is a little noob, but how would I use this library with Typescript?
I am having a hard time configuring it to work Typescript due to compile time issues:
import React, {FunctionComponent, Fragment} from "react";
import classNames from 'classnames';
import injectSheet from 'react-jss';
import styles from "./Shimmer.Style";
export interface ShimmerProps {
classes
}
export const Shimmer: FunctionComponent<ShimmerProps> = (
props
) => {
let modifiedChildren: any[] = [];
React.Children.map(props.children, (
(child, index) => {
const { classes } = props.classes;
const castedChild = (child as any);
const clonedElement = React.cloneElement(
castedChild.props,
{
className: classNames(castedChild.props.className, classes.shimmer)
}
);
modifiedChildren.push(clonedElement);
}
));
return (
<Fragment>
{modifiedChildren}
</Fragment>
)
};
export default injectSheet(styles)(Shimmer)
In order to use it I needed to define a ShimmerProps interface definition, however this now forces me to pass classes into the component:
<Shimmer classes={/** What to put here? **/} />