Skip to content

Instantly share code, notes, and snippets.

@fredrikbergqvist
Last active November 11, 2019 19:36
Show Gist options
  • Save fredrikbergqvist/dcff13628f9ebe3fdc2d28c67f24921c to your computer and use it in GitHub Desktop.
Save fredrikbergqvist/dcff13628f9ebe3fdc2d28c67f24921c to your computer and use it in GitHub Desktop.
Examples of TypeScript with React, Redux and Material UI
import * as React from "react";
interface OwnProps {
myProp:string;
}
const MyButton: React.FC<OwnProps> = (props) => {
return (<button />);
}
export default MyButton as React.ComponentType<OwnProps>;
import Button, { ButtonProps } from "@material-ui/core/Button";
import * as React from "react";
interface OwnProps {
buttonText:string;
}
type Props = OwnProps & ButtonProps;
const MyButton: React.FC<Props> = ({buttonText, ...rest}) => {
return (<Button {...rest}>{buttonText}</Button>);
};
export default MyButton as React.ComponentType<Props>;
import { createStyles, Theme, withStyles } from "@material-ui/core";
import * as React from "react";
import { WithStyles } from "@material-ui/core";
import { StyleRules } from "@material-ui/core/styles";
import Button, { ButtonProps } from "@material-ui/core/Button";
const styles: (theme: Theme) => StyleRules<string> = theme =>
createStyles({
root: {
margin: theme.spacing.unit
}
});
interface OwnProps {
buttonText:string;
}
type PublicProps = OwnProps & ButtonProps;
type Props = PublicProps & WithStyles<typeof styles>;
const MyButton: React.FC<Props> = ({classes, buttonText, ...rest}) => {
return (
<Button {...rest} className={classes.root}>
{buttonText}
</Button>);
};
export default withStyles(styles)(MyButton) as React.ComponentType<PublicProps>;
import Button, { ButtonProps } from "@material-ui/core/Button";
import * as React from "react";
import { Action, compose } from "redux";
import { Theme, WithStyles, withStyles, WithTheme } from "@material-ui/core";
import { connect } from "react-redux";
import { ThunkDispatch } from "redux-thunk";
import createStyles from "@material-ui/core/styles/createStyles";
import { StyleRules } from "@material-ui/core/styles";
const styles: (theme: Theme) => StyleRules<string> = theme =>
createStyles({
root: {
margin: theme.spacing.unit
}
});
interface StateProps {
buttonText:string
}
interface DispatchProps {
dispatch: ThunkDispatch<IAppState, undefined, Action>;
}
interface OwnProps {}
type PublicProps = OwnProps & ButtonProps;
type Props = PublicProps & DispatchProps & StateProps & WithTheme & WithStyles<typeof styles>;
const MyButton: React.FC<Props> = ({classes, buttonText, ...rest}) => {
return (
<Button {...rest} className={classes.root}>
{buttonText}
</Button>);
};
const mapStateToProps = (state: IAppState): StateProps => {
return {
buttonText: state.buttonText
};
};
export default compose(
withStyles(styles, { withTheme: true }),
connect<StateProps, DispatchProps, OwnProps, IAppState>(mapStateToProps)
)(MyButton) as React.ComponentType<PublicProps>;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment