useChunk(defaultContent, props)

[ericclemmons]

See: https://app.asana.com/0/0/1177340596341441/f

This is a proof-of-concept for useChunk based on my integration with customer apps. The benefit of useChunk is that it allows for experimenting with dynamic content by computing content_key ad run-time. identifier isn't immediately known for dynamic content:

export default function Message({ children, ...props }) {
  return (
    <Box {...props}>
      <Text>{children}</Text>
    </Box>
  );
}

In the previous example, the chunk identifier would have to be tracked through the component hierarchies to dynamically render {children} inside of a <Chunk>.

• <Chunk identifier="...">Default Content</Chunk> still works as expected, but internally uses useChunk.

• useChunk(defaultContent, props) returns { content, element }:

  • content is the value of chunk.content from the API.
  • element is the value of renderChunk(chunk), for ease-of-use.

• Based on experimentation with useChunk(defaultContent), there may be a need to update <Editmode> provider to include projectId.

• useChunk(defaultContent) will compute content_key and request using that in absence of identifier.

const headline = useChunk("Welcome!", { identifier });

// Majority use-case with editmode.js integration
return <h1>{headline.element}</h1>

// Directly use value, but loses editmode.js integration.
// This is when the value is passed to a Component that requires a string.
return <Form label={headline.content} />

📦 Published PR as canary version: 1.0.23-canary.3.1fd3776.0

✨ Test out this PR locally via:

npm install [email protected]
# or 
yarn add [email protected]

[ericclemmons]

With the recent API publish, I found that the Accept request header had to be exactly application/json. Clicking https://www.editmode.app/api/v1/chunks/cnk_3b48542a99a45966bc7c will fail due to the Accept type.

[github-actions]

🚀 PR was released in v2.0.0 🚀