npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@walltowall/react-map-slices-to-components

v0.4.1

Published

React component to map a list of slices to components

Downloads

5

Readme

react-map-slices-to-components

Extends react-map-to-components to suit rendering a list of Prismic Slices. It adds the following features:

  • Sensible defaults for getKey and getTypes.
  • Override a component mapping by passing a map of curried functions to the mapOverrides prop.
  • Modify the list of slices using a function passed to the listMiddleware prop.
  • Renders a neutral default slice when a mapping is missing. Limited to the development environment.

Install

npm install --save react-map-slices-to-components react-map-to-components

Note that react-map-to-components is a peer dependency.

Usage

Default props

Defaults for getKey and getType props are configured to work with Prismic.

  • getKey: Returns the id or key field of the slice with priority given to id.
  • getType: Returns the __typename field of the slice.

You can easily override them by passing the appropriate prop.

// To override defaults:
<MapSlicesToComponents
  getKey={/* custom logic to get key */}
  getType={/* custom logic to get type */}
  {...props}
/>

Change styling for a specific slice

If you need to change styling for a specific slice, you can utilize the mapOverrides prop. This prop allows you to replace the default mapping for any slice type. When overriding a slice, you receive the original slice component if you simply want to pass new props to it. If you want to replace the component completly, the original slice can be ignored.

In the following example, we change the background of a PageBodyImageBlurb slice to red only if it follows a PageBodyHeroImage slice. Note that <Comp> here is the same as <PageBodyImageBlurb>.

<MapSlicesToComponents
  map={/* your slice map */}
  mapOverrides={{
    PageBodyImageBlurb: Comp => props => {
      const overrideProps = {}

      if (props.previousType === 'PageBodyHeroImage') overrideProps.bg = 'red'

      return <Comp {...props} {...overrideProps} />
    },
  }}
/>

Notice how we continue to spread props on the slice in addition to overrideProps. This ensures the slice continues to receive all the props it would have normally received. Since overrideProps is spread after props, any props declared before it will be replaced if present in overrideProps.

Change data for a specific slice

As shown above, you have access to the slice's props. For example, the PageBodyImageBlurb slice from our previous example may take in a heading prop. If you wanted to manipulate that data before it gets to PageBodyImageBlurb, you could override its value.

<MapSlicesToComponents
  map={/* your slice map */}
  mapOverrides={{
    PageBodyImageBlurb: Comp => ({ heading, ...props }) => {
      // mockingcase returns a mOcKiNgCaSe version of its input
      const newHeading = mockingcase(heading)

      return <Comp {...props} heading={newHeading} />
    },
  }}
/>

We can manipulate any of its props using arbitrary JavaScript. Note that we spread props on the returned component to ensure the slice continues to receive all the props it expects.

Change the list of slices

mapOverrides allows you to alter the returned component for a slice, but it does not allow you to determine the order in which it is rendered. MapSlicesToComponents takes a listMiddleware prop that provides functionality to do just that.

listMiddleware accepts a function that accepts a list of slices as its only input and returns a modified version of that list. Modifications could include whitelisting or blacklisting slice types, reordering slices, or injecting slices that do not exist anywhere else.

// Removes slices with the GraphQL typename `PrismicPageBodyHeroImage`.
const noPageBodyHeroImage = filter(
  slice => slice.__typename !== 'PrismicPageBodyHeroImage',
)

// Flips the order of the slices using Lodash's reverse function.
const reverseSlices = _.reverse

// Adds a SecretSlice to the list as the third element. Since the object is
// passed directly to the slice, you can include any data, including functions.
const addSecretSlice = list => {
  const secretSliceData = {
    __typename: 'SecretSlice',
    id: 'uniqueId',
    data: {
      handleButtonClick: () => console.log('Functions in data!'),
    },
  }

  list.splice(2, 0, secretSliceData)

  return list
}

// Using the listMiddleware prop.
const Page = () => (
  <MapSlicesToComponents
    list={/* your list */}
    listMiddleware={/* middleware function here */}
  />
)

listMiddleware affects the raw list of slices before it is processed through mapDataToProps and map. listMiddleware is a low-level API that allows you to manipulate the data before MapToComponents processes it.

Providing Global Enhancers

It may be desireable to define global behavior for your mapped props or context objects. In these cases, you can provide the mapDataToPropsEnhancer and mapDataToContextEnhancer as props to MapSlicesToComponents. You can think of an enhancer as a middleware that runs after your original mapping function.

An enhancer receives the props or context object from the return value of a slice's mapDataToProps or mapDataToContext slice as it's first argument, and the rest of the data you would normally have in mapDataToProps or mapDataToContext as the second argument.

An enhancer must return the final shape of props or context for that slice. See below for an example.

// Define your global enhancer.
const mapDataToPropsEnhancer = (props, { previousType }) => {
  return {
    isPreviousHeader: previousType === 'Header'
    // Spreading props here allows the original props in the slice
    // to have priority over enhancer props.
    ...props,
  }
}

// Use the enhancer.
const Page = () => (
  <MapSlicesToComponents
    mapDataToPropsEnhancer={mapDataToPropsEnhancer}
  />
)