Map to Components

React component to map a list of data to specified React components. Useful when rendering data from external sources such as block content from a CMS.

Map to Components

Install

npm i @walltowall/map-to-components

Usage

MapToComponents takes a list of data and renders a list of components using a provided map. See below for an example:

import { MapToComponents } from "@walltowall/map-to-components"

import { HeroBlock } from "blocks/hero"
import { CallToActionBlock } from "blocks/CallToAction"

// List of blocks that probably comes from a CMS
const list = [
  { id: 1, type: "Hero", text: "Text for a Hero component" },
  { id: 2, type: "CallToAction", text: "Hey", buttonText: "Call Me" },
]

// For each item in the list, get a unique key using `getKey`. `getKey`
// should return a unique value for each item in the list such as an ID
// or UUID. This value will be used as the `key` prop when rendering the
// component.
function getKey(data) {
  return data.id
}

// For each item in the list, get a unique type using `getType`. `getType`
// should return a string that corresponds to a React component defined in the
// `map` prop.
function getType(data) {
  return data.type
}

// Provide a map whose keys map to React components.
const map = {
  Hero: HeroBlock,
  CallToAction: (props) => <CallToActionBlock text="Hello World!" {...props} />,
}

const App = () => (
  <MapToComponents getKey={getKey} getType={getType} list={list} map={map} />
)

Providing props to components

In the previous example, notice that an item with type CallToAction would render <CallToActionBlock> with the prop text="Hello World". By creating a new function component in map, you can provide default props to your components. This is in contrast to just passing a reference to a component, as is done with <HeroBlock>.

By default, no props except key are passed to components.

To pass props to the components using data derived from the object in the list, you can provide a mapDataToProps prop to MapToComponents.

<MapToComponents
  map={{
    Hero: HeroBlock,
    CallToAction: CallToActionBlock,
  }}
  mapDataToProps={{
    Hero: ({ data }) => ({ text: data.text }),
    CallToAction: ({ data }) => ({ buttonText: data.buttonText }),
  }}
/>

In the above exmaple, the <HeroBlock> component receives a text prop with the value data.text, where data is the element in the list that maps to the Hero type.

Each functoin in mapDataToProps has access to the current element, data about the element such as index, and data about sibling elements. See the mapDataToProps API for reference.

mapDataToContext

There may be times where you need to reference data from other elements in the list, such as the previous or next element, that influences the data you pass to your component.

Using just mapDataToProps, the only way to access a sibiling's derived data (i.e. data that is dynamically created, not statically available on the element) is to set it on mapDataToProp's return object. Since all values returned from mapDataToProps are passed to the element's component, this forces the contextual data to be passed to the component, which may be unwanted.

Data about the next element is also not available yet as the list is mapped synchronously.

Instead, you can provide a mapDataToContext prop to create contextual data about an element. This works exactly like mapDataToProps. The objects returned from the mapDataToContext functions are available to the mapDataToProps functions under the context properties.

Unlike mapDataToProps, data returned from mapDataToContext is not passed to the component automatically.

Each function in mapDataToProps has access to the current element, data about the element such as index, and data about sibling elements. See the mapDataToContext API for reference.

API