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 🙏

© 2025 – Pkg Stats / Ryan Hefner

@contentful/experiences-components-react

v1.33.0

Published

A basic set of components to use with Studio Experiences

Downloads

27,386

Readme

@contentful/experiences-components-react

Purpose

  • Stores React-specific definitions for Structure and Built-in copmonents provided to the user by Contentful.
  • Note that this is a React specific package. Therefore, unlike the core package, React specific compatibilities are implemented here and support for other frontend frameworks would result in a new package being created under a separate namespace.

Concepts

  • Structure component: Contentful-provided components for users to define their layout in the experience canvas.
  • Built-in component: Synonymously named as Basic component. These are Contentful-provided components with a two-fold purpose. First is to get users quickly kickstarted with some compoments such as the built-in button so that they can drag and drop components on the canvas in cases where the user has yet to provide their own custom components. Second purpose is to provide universally useful components on the user's behalf so that every user does not have to solve the same problem. Great examples would be the image or text component.
  • Custom component: User-defined components where the user will register their components through the defineComponents function. Components that are registered through the defineComponents function will be displayed in the Components tab in the Experiences UI.
  • Disabling built-ins: Users are allowed to disable specific or all Contentful-provided basic/built-in components as they see fit. The main purpose is to restrict or ensure that Experiences editors use the correct components for their Experiences. Additionally, the built-in components IDs are prefixed with contentful- to prevent id clashing where a customer would override Contentful's built-in component in cases where the IDs match. This means the user will have to intentionally id their custom component with the contentful- prefix to override the provided built-in component such as contentful-button.
  • variables vs builtInStyles: In the Contentful-provided components or even user-defined custom components there are two ways to enable style options in the Design sidebar in the Experiences UI with default values. Listing an array of options with builtInStyles defined like builtInStyles: ['cfMargin'] will provide the editor with UI margin editing in their Experience with predefined default values for margin which is currently 0px. However, let's say the user would like to define their button margin with 4px whenever a button is dropped onto the canvas, they can then define a variable instead like below. This will still provide the editor with the margin UI editing in their experience with the values being defaulted to 4px instead of 0px.
  variables: {
    cfMargin: {
      displayName: 'Margin',
      type: 'Text',
      group: 'style',
      description: 'The margin of the button.',
      defaultValue: '4px',
    },
  }

Relevant Contentful documentation links