CCV2 Template Tutorials#1434
Conversation
|
Warning This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
This stack of pull requests is managed by Graphite. Learn more about stacking. |
sfc-gh-dmatthews
force-pushed
the
prettier-python-diff
branch
from
58eb0b9 to
f786504
Compare
sfc-gh-dmatthews
force-pushed
the
ccv2-template-tutorials
branch
from
c549445 to
01ddaf1
Compare
sfc-gh-dmatthews
force-pushed
the
ccv2-template-tutorials
branch
from
01ddaf1 to
3b284ff
Compare
sfc-gh-dmatthews
force-pushed
the
prettier-python-diff
branch
from
f786504 to
a3f1c98
Compare
sfc-gh-dmatthews
requested review from
sfc-gh-bnisco
and removed request for
a team
| └── vite-env.d.ts | ||
| ``` | ||
|
|
||
| Notice the React template has two frontend source files instead of one: `index.tsx` handles integration with Streamlit's lifecycle, and `MyComponent.tsx` contains the React component. |
There was a problem hiding this comment.
note: Putting these in separate files is a convention rather than a hard requirement. If someone wanted to put this all in 1 file, that would be fine! If they wanted to split it out into 100 files, that is also okay 😄 . Not sure any change to the wording here is necessary unless you think it would be clearer to make this distinction.
| ``` | ||
|
|
||
| This file bridges Streamlit's component lifecycle and React. Because Streamlit calls your `FrontendRenderer` function on every re-render (whenever `data` changes), the pattern is different from a typical React app: | ||
| - **React root management**: You can't create a new React root each time Streamlit calls your function. Instead, the `WeakMap` stores one root per component instance, keyed by `parentElement`. On the first call, it creates the root. On subsequent calls, it re-renders into the existing root. |
There was a problem hiding this comment.
note: One other implication is that this is how users implement support for multiple different instances of the same component running on the frontend at once. So if there is a one-time global setup (eg: loading some data from a 3rd party) that is needed, it only needs to be handled once at the global level, and can then be shared by all other instances.
2 participants
📚 Context
Added comprehensive tutorials for building custom components using the official component template. These tutorials provide step-by-step guidance for developers who want to create package-based custom components with either Pure TypeScript or React + TypeScript.
🧠 Description of Changes
Current:
The documentation had conceptual information about custom components but lacked practical, hands-on tutorials showing developers how to use the official component template.
Revised:
Files added/modified:
content/develop/tutorials/custom-components/_index.md- New tutorial section landing pagecontent/develop/tutorials/custom-components/template-typescript.md- Pure TypeScript tutorialcontent/develop/tutorials/custom-components/template-react.md- React + TypeScript tutorialcontent/develop/tutorials/_index.md- Added custom components cardcontent/develop/concepts/custom-components/components-v2/package-based.md- Added tip box linking to tutorialscontent/menu.md- Added navigation entries for new tutorial pages💥 Impact
Size:
🌐 References
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.