Struggling using DataProvider to access data from custom component inside Plasmic Studio via context

[jan_patrick-huber]

Hi Plasmic Community,

First of all, thanks for everything you have built so far! I think Plasmic and the way things are designed are a huge benefit for developers, designers and everyone in between.

Regarding my issue, I already tried consulting the docs, but could not resolve my issue.

I am trying to access data from a custom component inside Plasmic studio via context - which I am struggling to achieve.

I created a custom component “Company” and added some static data to it:

import React from 'react';
import { DataProvider } from '@plasmicapp/loader-nextjs';


export interface CompanyProps {
    children?: React.ReactNode;
    className?: string; // Add className to the props interface
  }
  
const Company: React.FC<CompanyProps> = ({ className }) => { // Accept className prop
  // Static company data
  const companyData = {
    name: 'Acme Corporation',
    industry: 'Manufacturing',
    description: 'A leading firm in the manufacturing of innovative products.'
  };

  return (
      <div className={`container ${className}`}>
        <DataProvider name="companyData" data={companyData}>
        {/* The rest of your component UI */}
        <p>Company Name: {companyData.name}</p>
        <p>Industry: {companyData.industry}</p>
        <p>Description: {companyData.description}</p>
        </DataProvider>
      </div>

  );
};

export default Company;```

I registered the component and set providesData to true in my plasmic-init.ts like this:

PLASMIC.registerComponent(Company, {
  name: 'Company',
  providesData: true,
  props: {
    children: 'slot',
  }
});

Custom component registration works, I can select the registered components and add them to the canvas, but when I try to access data from the components I cannot find the context in the data picker:

Using $ctx in with custom code yields this:

Am I missing something or doing something wrong?

Thanks in advance!!!

Best,
Jan

Relevant links:

• My project: Plasmic

[gabriel_grohmann]

I think the trick is to place your elements within the dataComponent children slot, perhaps?

I also stumbled across a similar concept and needed to nest everything, that is supposed to work with the data inside the element/container. Which also made sense when I figured it out.

[jan_patrick-huber]

Hi Gabriel,

Thanks for your response, can you elaborate? Are you referring to putting elements somewhere in the Plasmic Studio or inside my code?

Thanks!
Best,
Jan

[gabriel_grohmann]

Just using a simple example from building a new page: the elements have to be the children of the data provider, which in your case is your company component, if I understood correctly. In my example it is a simple text element, which I repeated with the data components data.

[sarah_ahmed]

@gabriel_grohmann is correct in case of Plasmic components. Also, he is correct that the provided data is only accessbile within the elements nested inside the DataProvider.

In case of the code component that you mentioned in the original question, you should be able to access this data within the Company’s children slot. However, I see that the children slot is not being used in the React component. You can modify it as below to make it work:

@jan_patrick-huber

const Company: React.FC<CompanyProps> = ({ className, children }) => { // Accept className prop
  // Static company data
  const companyData = {
    name: 'Acme Corporation',
    industry: 'Manufacturing',
    description: 'A leading firm in the manufacturing of innovative products.'
  };

  return (
      <div className={`container ${className}`}>
        <DataProvider name="companyData" data={companyData}>
        {/* The rest of your component UI */}
          <p>Company Name: {companyData.name}</p>
          <p>Industry: {companyData.industry}</p>
          <p>Description: {companyData.description}</p>
          {children}
        </DataProvider>
      </div>

  );
};

[jan_patrick-huber]

Hi Guys,

Thanks so much for your responses.

@sarah_ahmed: After adding children to the custom component as you outlined, I am now able to access the data in Plasmic Studio once I insert the components where I want to link up the data into the children slot.

Thanks so much!!!

Happy Easter!