ExtActivitySingle example:
This component is still in active development. This is used in Weekly Activity Stats to display a single activity.
See test/data-apiv1-activities-1-week.json for data shape.
ExtBarChartBox example:
Imports
import { Bar, BarChart, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
This is used in Weekly Activity Stats. It is a highly customized visualization specifically for the data shape it represents.
See test/data-apiv1-activities-1-week.json for data shape.
ExtCardSimple example:
Simple Card using <Typography /> type="body1" className={classes.title}
•while this is a type="body1" class="pos"
and this is a lowly component="p"
ExtColorBox example:
Imports
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';
import Card, { CardContent } from 'material-ui/Card';
Used for displaying a pallet object as color cards.
ExtDivSimpleText example:
ExtFooter example:
Imports
import { withStyles } from 'material-ui/styles';
© 2025 rcrsv.com
This app came about because I wanted to use it. It is a labor of love and suffering, much like cycling.
© 2025 araceathlete.com
JSS: Uses
composeto combine classes
ExtGeolocation example:
noGeolocation set so not location is requested for styleguide visitors.
Imports
None
Lat and Lng are given to this component from Parent.
ExtIcon example:
Imports
import classNames from 'classnames';
import { withStyles } from 'material-ui/styles';
import TestIcon from './test-icon';
import
Icon from 'mdi-react/ Icon';
Get Icons from materialdesignicons.com
JSS: This file shows use of a nested rule. See
&$inverse.
ExtIcon example:
Imports
import classNames from 'classnames';
import { withStyles } from 'material-ui/styles';
import TestIcon from './test-icon';
import
Icon from 'mdi-react/ Icon';
Get Icons from materialdesignicons.com
JSS: This file shows use of a nested rule. See
&$inverse.
ExtLayoutSimple example:
<no options>
svgIcon={ReactIcon}
size="xs"
svgIcon={ReactIcon}
color="primary"
size="sm"
svgIcon={ReactIcon}
color="secondary"
pointer
size="md"
svgIcon={ReactIcon}
color="primary"
inverse
size="lg"
svgIcon={MenuIcon}
color="secondary"
inverse
size="xl"
svgIcon={AutoFixIcon}
<no options>
<no icon>
size="xs"
inverse
<no icon>
color="primary"
size="sm"
<no icon>
color="secondary"
pointer size="md"
<no icon>
color="primary"
inverse size="lg"
<no icon>
color="secondary"
inverse size="xl"
<no icon>
ExtMapPin example:
Imports
import FaMapPin from 'react-icons/lib/fa/map-pin';
import theme from '../../styles/theme';
import style from './style';
Lat and Lng are given to this component when combined with google-map-react
and is sized and margin to land on the correct location.
Without this, the pin would be low and to the right.
ExtMetricLabel example:
TagBar example:
No tags
Tags as strings
Tags as an array
Closing tag