CARTO for React

CARTO for React

UI

Package Version Downloads
@carto/react-ui version downloads

A set of UI elements to build CARTO for React applications.

The package includes 2 main elements: a set of values to use a Material UI theme with CARTO brand (cartoThemeOptions) + a group of widgets:

  • WrapperWidgetUI: a collapsible panel with a title, useful to wrap other UI elements.
  • CategoryWidgetUI: to display with horizontal bars a magnitude for each selected category (eg. population sum per country).
  • FormulaWidgetUI: to represent a single value (eg. average income in $).
  • HistogramWidgetUI: to display the distribution of values, with arbitrary bins (eg. number of stores per annual income).
  • PieWidgetUI: to represent structure, using also ‘category’ groups, this time displayed with a donut chart.

Tip: The best place to see UI widgets reference (and how they work) is the Storybook catalogue

Constants & enums

cartoThemeOptions

A tree of configuration elements (colors, font sizes, families…) to define a theme. See official doc on theming at Material UI theming

  • Example:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    
    import { createMuiTheme, ThemeProvider } from "@material-ui/core";
    import { cartoThemeOptions } from "@carto/react-ui";
    
    // Theme build
    let theme = createMuiTheme(cartoThemeOptions);
    theme = responsiveFontSizes(theme, {
      breakpoints: cartoThemeOptions.breakpoints.keys,
      disableAlign: false,
      factor: 2,
      variants: [
        "h1",
        "h2",
        "h3",
        "h4",
        "h5",
        "h6",
        "subtitle1",
        "subtitle2",
        "body1",
        "body2",
        "button",
        "caption",
        "overline",
      ],
    });
    
    // ... and its use in the main App component
    return (
      <ThemeProvider theme={theme}>
        <CssBaseline />
        // YOUR APP CONTENT
      </ThemeProvider>
    );