Overview

Utilities for creating and styling components

Tutorials

• Pattern Library

• Forms and validation

API docs

Constant

consultantShape

Reusable objects to use in propTypes for the group search components

factSheetShape

Reusable object to use in propTypes for a factSheet prop.

accountShape

Reusable object to use in propTypes for a account prop.

activityGoalShape

Reusable object to use in propTypes for a activity goal type prop.

activityShape

Reusable object to use in propTypes for a activity prop.

featuredPodcastShape

Reusable object to use in propTypes for a featurdPodcast prop.

featureShape

Reusable object to use in propTypes for a feature prop.

foodItemShape

Reusable object to use in propTypes for a activity prop.

foodSearchExplanationShape

Reusable object to use in propTypes for a resultExplanation prop.

FoodShape

Reusable object to use in propTypes for a food prop.

imageShape

Reusable object to use in propTypes for a image prop.

interactionShape

Reusable object to use in propTypes for a interaction prop.

paginationShape

Reusable object to use in propTypes for a pagination prop.

PlannedDayStatsShape

Reusable object to use in propTypes for a overview stats

PlannedDayShape

Reusable object to use in propTypes for a food prop.

PlannerRecipeShape

Reusable object to use in propTypes for a food prop.

podcastCategoryShape

Reusable object to use in propTypes for a podcastCategory prop.

podcastShape

Reusable object to use in propTypes for a podcast prop.

profileShape

Reusable object to use in propTypes for a profile prop.

promotedSearchShape

Reusable object to use in propTypes for a promotedSearch prop.

recipeDetailShape

Reusable object to use in propTypes for a recipe prop in a detail page.

recipeShape

Reusable object to use in propTypes for a recipe prop.

slimmingGroupShape

Reusable object to use in propTypes for a slimmingGroup prop.

successStoriesShape

Reusable object to use in propTypes for a success stories prop.

trackingShape

Reusable object to use in propTypes for a image prop.

weighInShape

Reusable object to use in propTypes for a weigh-in prop.

sizePropTypes

Reusable Array of sizes for propTypes of a size prop.

priceShape

Reusable object to use in propTypes for a price prop.

productSnapshotShape

Reusable object to use in propTypes for a productSnapshotShape prop.

purchaseItemShape

Reusable object to use in propTypes for a purchaseItem prop.

purchaseShape

Reusable object to use in propTypes for a purchaseItem prop.

quickLinkShape

Reusable object to use in propTypes for a quicklink prop.

subscriptionPackageShape

Reusable object to use in propTypes for a subscriptionPackageShape prop.

Module

componentClassNameUtils

Contains utilities to generate classnames for React components. One of these utilities should be used on the root element of every component.

imageSizeUtils

Utilities for calculating the optimal image sizes to request from the backend.

scrollTo

simple wrapper for scroll-to module that will not include the module server-side

Function

childrenOfType

Returns a propType checker that checks if the passed children are of one of the provided component types.

shouldUpdateScroll

Function that determines if the scroll position should be updated. Called when navigating to a new route. See: https://github.com/taion/react-router-scroll#custom-scroll-behavior

Executing API requests and processing their data

Tutorials

• API Calls

• Page Initialization

API docs

Function

makeIsLoadingSelector

Creates a selector that returns true if an async action is currently pending for any of the given action types.

apiGetCollection

Performs an API request to get a list of entities.

collectionCachingDefault

Default caching for apiGetCollection. Will lookup the requested items in the current collection reducer state. When some items already exist, will truncate the request pagination parameters to not include these items. When all items already exist, will cancel the call.

collectionCachingNoPagination

Simplified caching for apiGetCollection. If any data is present in the current collection state, we consider the list as cached (regardless of the amount of data).

apiGetEntity

Performs an API request to get a single entity. Checks if the given entity type already exists in the state. If so, this action will skip the request and resolve immediately (unless the useCache parameter says otherwise). When the API responds, will automatically put the response on the relevant redux state.

Constant

GET_NEXT

Can be passed as a value for offset in apiGetCollection to automatically get the next set we don't have yet

GET_PREVIOUS

Can be passed as a value for offset in apiGetCollection to automatically get the previous set we don't have yet

Module

apiRequest

This module contains actions to perform basic api requests

paginationType

Contains constants for different data pagination types for collections.

Managing and organizing Redux.js state

API docs

Module

collectionActions

Redux actions to manage collections

collectionIds

Contains ids for collections (lists of entities). Some collections have no parameters and are exported as constant strings. Collections that have parameters are exported as functions that receive parameters and return a string id.

collectionPaginationViewSelector

Contains the function makeCollectionPaginationViewSelector that can be used to select all the entities that should be visible according to the current view pagination in the collectionPaginationViewsReducer

collectionSelector

Contains the function makeCollectionSelector that can be used to select all the entities in a collection from redux state.

Creating forms and validating user input

Tutorials

• Forms and validation

• Usage differences between enhanced-redux-form and redux-form

• Adding validation

• Wizard Forms

• Using input values in forms

• Composite inputs

API docs

Class

CompositeInputFormatterError

Custom error type that can be used in compositInputFormatters to indicate that one of the values of the sub-fields is invalid.

CompositeInput

For documentation, please refer to the tutorial: Composite inputs

EnhancedField

Should be used instead of the redux-form <Field> component to provide enhanced-redux-form functionality to inputs. The API for this component is exactly the same as the <Field> component. Please see the redux-form documentation for more info.

FormValueProvider

Helper component that injects form values into a child component, with as little performance impact as possible. If one of the given form values change only the child of this component will re-render (instead of the entire form).

The form values will be available on the 'formValues' prop injected by this component.

Please note: you can only pass 1 child component to this component

Module

BmiUtils

Utilities to calculate BMI from weight and height, and determining if the BMI is within configured limits

basic-validations

This file contain custom validation rules which aren't in validator npm

inputEventUtil

Utilities for handling input events on forms

compositeInputActions

All functions in this module are action creators and the return value should be passed to the redux store dispatch() function

enhancedFormActions

All functions in this module are action creators and the return value should be passed to the redux store dispatch() function

wizardFormActions

All functions in this module are action creators and the return value should be passed to the redux store dispatch() function

compositeInputFormatters

Formatter functions that can be used to combine multiple form values into a single value using the <CompositeInput /> component.

ComposeOn

The values of these constants represent the additional events (besides before validation) on which a CompositeInput should execute it's formatter to compose the child field values into a single value.

Constant

formFieldPropTypes

Default PropTypes that can be applied to a component that is wrapped in EnhancedField

Function

parseGMapsAddressComponents

Converts the address_components array returned by the Google Maps API into an object with values for the AddressInput component.

HideOnError

Will hide children passed to the component if a relevant error is triggered.

See index.js propTypes for props that need to be passed from the outside.

enhancedFormWizard

Adds multi-step form functionality to a component. For general usage instructions, please refer to Wizard Forms.

enhancedReduxFormMiddleware

Form validation middleware that should be passed to redux when initializing the store. This will intercept redux-form actions and perform enhanced functionality accordingly

getRegisteredFields

Retrieves the registered fields from a redux form.

isFieldRegistered

Returns true if the given fields is among the given collection of registeredFields

isSubmissionError

Tests if the given error is a submission error as returned by the Gateway API.

enhancedReduxForm

Returns a function that wraps a component in enhanced-redux-form functionality. Syntax is similar to the reduxForm() method of redux-form:

const MyEnhancedForm = enhancedReduxForm(reduxFormConfig, validation)(MyForm);

Configuring routes and redirects

Tutorials

• Forms and validation

API docs

Class

RedirectError

A special Error type that can be used inside prepare functions of components. When thrown inside a prepare function, it will be caught and cause a redirect. On the server, this redirect will be a 302. On the client, this redirect will be a pushState (and might execute after component render).

RouteRequirement

A helper class to define a requirement that is needed to enter a route. Instances of this class can be passed to Route components using the requirements prop

Function

processRequirements

Checks each of the given requirements to see if they are met, and calls their onFail handler otherwise. If any of the requirements fail, it will not process further requirements.

createPath

Builds a path from a template and replaces the params

parseRoutesRequirements

Looks up the route requirements by looking at the requirements prop on the given routes array. The requirement prop on child routes overrides those on parent routes, so this function will only use the last requirements prop it can find.

Returns an array of which route requirements must be met, based on the requirements in the requirements prop and its child requirements.

If none of the routes have a requirements prop defined, this will return an empty array.

Obtaining and parsing locale strings

API docs

Module

messageFormatUtil

Utilities to get messages from a messageFormat bundle

Tracking pageviews and events and capturing user feedback

API docs

Function

enableDebugBreadcrumb

Patches the global debug lib by also adding raven breadcrumbs

createMiddleware

Creates a middleware to save redux actions as raven breadcrumbs

configureRavenOnClient

Create/config a raven client for the browser.

createClientOnServer

Create/config a raven client for nodejs.

asyncTrackingMiddleware

Middleware function that tracks the timing of all dispatched async actions. Should be added after the asyncActionMiddleware that dispatches these actions.

reduxListenersMiddleware

Redux middleware that can be used to attach listeners to Redux actions.

IMPORTANT: This should only be used to add additional side-effects to Redux actions, such as event tracking. Using this middleware to do application logic is an anti-pattern.

Module

dataLayerUtils

Utilities to manage data layer tracking. You probably don't want to use these utilities directly. Instead, use the wrapper utilities provided in ./index.js that will also take care of other types of tracking

tracking

This module contains general tracking utilities that will call all relevant implementation-specific tracking utilities. Usage of these tracking utilities (if available) is preferred above using the implementation-specific utils.

Managing those browser quirks

API docs

Module

browserUtil

Utilities to detect the user's browser

scrollTo

simple wrapper for scroll-to module that will not include the module server-side