-
Notifications
You must be signed in to change notification settings - Fork 156
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(web-components): add React wrapper #4678
Conversation
Adds React wrapper generator (`createReactCustomElementType`), based on one in `carbon-web-components` to `@carbon/ibmdotcom-web-components` codebase. It helps our adoptors using React to use our components, with the following support that React itself lacks for non-intrinsic elements: * Element attributes mapping to non-string element property values (e.g. Boolean attributes) * React props mapping to element properties instead of element attributes * Event handlers Also adds a Babel plugin that automatically creates React wrappers of our components from our components' `@property()` annotations, as well as the corresponding build process that generates the React wrappers to `es/components-react` directory. So in the most typical scenario, our users can use components in `es/components-react` directory in the same manner as regular React components. Also adds React stories so we can demonstrate the React integration. Refs carbon-design-system#4251.
Deploy preview created for package Built with commit: 4fcd9df2a291c48c2d1811ba6c82b2e934bf4158 |
Deploy preview created for package Built with commit: 4fcd9df2a291c48c2d1811ba6c82b2e934bf4158 |
19b16a2
to
cd79f66
Compare
cd79f66
to
368e7f7
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good thanks @asudoh!
Thank you @asudoh ! Can you resolve the conflicts? |
This PR currently has a merge conflict. Please resolve this and then re-add the |
Related Ticket(s)
Refs #4251.
Description
Adds React wrapper generator (
createReactCustomElementType
), based on one incarbon-web-components
to@carbon/ibmdotcom-web-components
codebase.It helps our adaptors using React to use our components, with the following support that React itself lacks for non-intrinsic elements:
Also adds a Babel plugin that automatically creates React wrappers of our components from our components'
@property()
annotations, as well as the corresponding build process that generates the React wrappers toes/components-react
directory. So in the most typical scenario, our users can use components ines/components-react
directory in the samemanner as regular React components.
Also adds React stories so we can demonstrate the React integration.
Changelog
New
createReactCustomElementType
).Changed
defs.ts
to make above build steps simpler.