react-router#withRouter TypeScript Examples
The following examples show how to use
react-router#withRouter.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: AccountSelector.tsx From clarity with Apache License 2.0 | 5 votes |
|
AccountSelector = withRouter(_AccountSelector)
Example #2
| Source File: App.tsx From clarity with Apache License 2.0 | 5 votes |
|
Navigation = withRouter(_Navigation)
Example #3
| Source File: ThemeContainer.tsx From anthem with Apache License 2.0 | 5 votes |
|
ThemeProvider = composeWithProps<ComponentProps>(
withRouter,
connect((state: ReduxStoreState) => ({
isDarkTheme: state.settings.isDarkTheme,
})),
)(ThemeProviderComponent)
Example #4
| Source File: history.tsx From NetStatus with MIT License | 5 votes |
|
ReactRouterSaveHistory = withRouter(HistoryFetch)
Example #5
| Source File: App.tsx From casper-clarity with Apache License 2.0 | 5 votes |
|
Navigation = withRouter(_Navigation)
Example #6
| Source File: Details.tsx From cra-serverless with MIT License | 5 votes |
|
Details = withRouter(({ match: { params: { id } } }) => (
<>
<Helmet>
<title>Details: {id}</title>
</Helmet>
<h2>Details: {id}</h2>
</>
))
Example #7
| Source File: DaoSettings.tsx From homebase-app with MIT License | 4 votes |
|
DaoSettingsForm = withRouter(
({ submitForm, values, setFieldValue, errors, touched }: any) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
const {
data: tokenMetadata,
isLoading: loading,
error,
} = useTokenMetadata(
values?.governanceToken?.address,
values?.governanceToken?.tokenId
);
useEffect(() => {
if (tokenMetadata) {
setFieldValue("governanceToken.tokenMetadata", tokenMetadata);
}
if (error) {
setFieldValue("governanceToken.tokenMetadata", undefined);
}
}, [error, setFieldValue, tokenMetadata]);
const { dispatch } = useContext(CreatorContext);
const match = useRouteMatch();
const history = useHistory();
useEffect(() => {
if (values) {
dispatch({
type: ActionTypes.UPDATE_NAVIGATION_BAR,
next: {
handler: () => {
submitForm(values);
},
text: "CONTINUE",
},
back: {
handler: () => history.push(`templates`),
text: "BACK",
},
});
}
}, [dispatch, errors, history, match.path, match.url, submitForm, values]);
return (
<>
<SecondContainer container item direction="row" spacing={2} wrap="wrap">
<Grid item xs={isMobile ? 12 : 9}>
<Typography variant="subtitle1" color="textSecondary">
{" "}
Token Address{" "}
</Typography>
<CustomInputContainer>
<Field
id="outlined-basic"
placeholder="KT1...."
name="governanceToken.address"
component={CustomFormikTextField}
/>
</CustomInputContainer>
{errors.governanceToken?.address &&
touched.governanceToken?.address ? (
<ErrorText>{errors.governanceToken?.address}</ErrorText>
) : null}
</Grid>
<Grid item xs={isMobile ? 12 : 3}>
<Typography variant="subtitle1" color="textSecondary">
{" "}
Token ID{" "}
</Typography>
<CustomInputContainer>
<Field
id="outlined-basic"
placeholder="0"
name="governanceToken.tokenId"
component={CustomFormikTextField}
/>
</CustomInputContainer>
{errors.governanceToken?.tokenId &&
touched.governanceToken?.tokenId ? (
<ErrorText>{errors.governanceToken?.tokenId}</ErrorText>
) : null}
</Grid>
{tokenMetadata && !loading && (
<MetadataContainer item xs={12}>
<Typography variant="subtitle2" color="secondary">
{tokenMetadata.name} ({tokenMetadata.symbol})
</Typography>
</MetadataContainer>
)}
<Grid item xs={isMobile ? 12 : 9}>
<Typography variant="subtitle1" color="textSecondary">
{" "}
DAO Name{" "}
</Typography>
<CustomInputContainer>
<Field
name="name"
inputProps={{ maxLength: 18 }}
type="text"
placeholder="My Group’s Token"
component={CustomFormikTextField}
InputProps={{
endAdornment: (
<InputAdornment position="start">
<Tooltip placement="bottom" title="DAO Name info">
<InfoIconInput color="secondary" />
</Tooltip>
</InputAdornment>
),
}}
></Field>
</CustomInputContainer>
{errors.name && touched.name ? (
<ErrorText>{errors.name}</ErrorText>
) : null}
</Grid>
<Grid item xs={isMobile ? 12 : 3}>
<Typography variant="subtitle1" color="textSecondary">
{" "}
Token Symbol{" "}
</Typography>
<CustomInputContainer>
<Field
name="symbol"
type="text"
inputProps={{
style: { textTransform: "uppercase" },
maxLength: 6,
}}
placeholder="MYTOK"
component={CustomFormikTextField}
InputProps={{
endAdornment: (
<InputAdornment position="start">
<Tooltip placement="bottom" title="Token symbol info">
<InfoIconInput color="secondary" />
</Tooltip>
</InputAdornment>
),
}}
></Field>
</CustomInputContainer>
{errors.symbol && touched.symbol ? (
<ErrorText>{errors.symbol}</ErrorText>
) : null}
</Grid>
</SecondContainer>
<SecondContainer container direction="row" alignItems="center">
<Grid item xs={12}>
<Typography variant="subtitle1" color="textSecondary">
Description
</Typography>
</Grid>
<TextareaContainer item xs={12}>
<Field name="description">
{() => (
<CustomTextarea
maxLength={1500}
aria-label="empty textarea"
placeholder="This is what we’re about..."
value={getIn(values, "description")}
onChange={(newValue: any) => {
setFieldValue("description", newValue.target.value);
}}
/>
)}
</Field>
<Tooltip placement="bottom" title="Description info">
<InfoIcon color="secondary" />
</Tooltip>
</TextareaContainer>
{errors.description && touched.description ? (
<ErrorText>{errors.description}</ErrorText>
) : null}
</SecondContainer>
<SecondContainer item container direction="row" alignItems="center">
<Grid item xs={12}>
<Typography variant="subtitle1" color="textSecondary">
{" "}
Administrator{" "}
</Typography>
</Grid>
<Grid item xs={12}>
<CustomInputContainer>
<Field
name="administrator"
type="text"
placeholder="tz1PXn...."
component={CustomFormikTextField}
InputProps={{
endAdornment: (
<InputAdornment position="start">
<Tooltip placement="bottom" title="DAO Name info">
<InfoIconInput color="secondary" />
</Tooltip>
</InputAdornment>
),
}}
></Field>
</CustomInputContainer>
{errors.administrator && touched.administrator ? (
<ErrorText>{errors.administrator}</ErrorText>
) : null}
</Grid>
</SecondContainer>
<SecondContainer item container direction="row" alignItems="center">
<Grid item xs={12}>
<Typography variant="subtitle1" color="textSecondary">
{" "}
Guardian{" "}
</Typography>
</Grid>
<Grid item xs={12}>
<CustomInputContainer>
<Field
name="guardian"
type="text"
placeholder="tz1PXn...."
component={CustomFormikTextField}
InputProps={{
endAdornment: (
<InputAdornment position="start">
<Tooltip placement="bottom" title="DAO Name info">
<InfoIconInput color="secondary" />
</Tooltip>
</InputAdornment>
),
}}
></Field>
</CustomInputContainer>
{errors.guardian && touched.guardian ? (
<ErrorText>{errors.guardian}</ErrorText>
) : null}
</Grid>
</SecondContainer>
</>
);
}
)
