{"componentChunkName":"component---src-pages-get-started-develop-other-frameworks-mdx","path":"/get-started/develop/other-frameworks/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Develop","description":"The Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.","tabs":["React","Vanilla","Angular","Vue","Other frameworks"]},"relativePagePath":"/get-started/develop/other-frameworks.mdx","titleType":"prepend","MdxNode":{"id":"1ec12068-77a1-5c8d-901b-832898d42f73","children":[],"parent":"d22329d3-188e-5964-8938-13d6b451ad3a","internal":{"content":"---\ntitle: Develop\ndescription: The Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.\ntabs: ['React', 'Vanilla', 'Angular', 'Vue', 'Other frameworks']\n---\n\n<AnchorLinks>\n\n<AnchorLink>Development options</AnchorLink>\n<AnchorLink>Other frameworks?</AnchorLink>\n\n</AnchorLinks>\n\n## Development options\n\nThe Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.\n\n<AnchorLinks small>\n\n<AnchorLink>Using just the styles</AnchorLink>\n<AnchorLink>Wrapping a component with a JavaScript framework of your choice</AnchorLink>\n<AnchorLink>Examples</AnchorLink>\n<AnchorLink>Troubleshooting</AnchorLink>\n\n</AnchorLinks>\n\n### Using just the styles\n\nDevelopers wanting to build in different ways follow the instructions for the [Vanilla](/get-started/develop/vanilla) library to access the styles and build out their own components.\n\n### Wrapping components with JavaScript frameworks\n\nMany JavaScript frameworks have a mechanism to dynamically create/destroy DOM elements, for example, upon change in array.\nThis often makes it unclear when the DOM element to instantiate a Carbon component is available, which often depends on the JavaScript framework you use.\n\nAlso when DOM elements that Carbon components have been instantiated on are being destroyed, the Carbon component instances should be released so that e.g. there are no zombie event handlers.\n\nThe easiest way to hook on the creation/destruction of DOM elements is by defining a \"wrapping component\", with the JavaScript framework of your choice. Here's an example using Web Components' [Custom Elements v1 spec](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements), but the notion of components, along with the lifecycle callbacks, are commonly found in many other JavaScript frameworks.\n\n```javascript\nclass BXLoading extends HTMLElement {\n  // Called when this custom element gets into render tree\n  connectedCallback() {\n    // \"this\" here is \"<bx-loading>\" element\n    this.innerHTML =\n      '(e.g. snippet from http://carbondesignsystem.com/components/loading/code)';\n    this.loading = CarbonComponents.Loading.create(\n      this.querySelector('[data-loading]')\n    );\n  }\n  // Called when this custom element gets out of render tree\n  disconnectedCallback() {\n    this.loading.release();\n  }\n}\ncustomElements.define('bx-loading', BXLoading);\n```\n\n### Examples\n\n[Angular 4 wrapper for Carbon](https://codepen.io/asudoh/pen/VryJBO?editors=1010) (We use this just as an example. [Angular](https://github.com/IBM/carbon-components-angular) is now supported by the Carbon Design System.)\n\n### Troubleshooting\n\nIf you experience any issues while getting set up with Carbon Components, please head over to the [Carbon Components GitHub repo](https://github.com/carbon-design-system/carbon-components) for more guidelines and support. Please [create an issue](https://github.com/carbon-design-system/carbon/issues) if your issue does not already exist.\n\n## Other frameworks?\n\nWe are open to the idea of providing core support for additional frameworks in future. We added Angular support in the summer of 2018 and Vue in early 2019.\n\nFor the Carbon Design System to incorporate additional frameworks into our core offering, those frameworks need clear, guaranteed, ongoing resources to maintain and support that option. If a team built a product using a native web components implemenation of Carbon, for example, but had no plan to support that solution outside of their product, that couldn't become a core part of the Carbon Design System.\n","type":"Mdx","contentDigest":"bdd8cec33abcc699670660eb0fc9594a","counter":1404,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Develop","description":"The Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.","tabs":["React","Vanilla","Angular","Vue","Other frameworks"]},"exports":{},"rawBody":"---\ntitle: Develop\ndescription: The Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.\ntabs: ['React', 'Vanilla', 'Angular', 'Vue', 'Other frameworks']\n---\n\n<AnchorLinks>\n\n<AnchorLink>Development options</AnchorLink>\n<AnchorLink>Other frameworks?</AnchorLink>\n\n</AnchorLinks>\n\n## Development options\n\nThe Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.\n\n<AnchorLinks small>\n\n<AnchorLink>Using just the styles</AnchorLink>\n<AnchorLink>Wrapping a component with a JavaScript framework of your choice</AnchorLink>\n<AnchorLink>Examples</AnchorLink>\n<AnchorLink>Troubleshooting</AnchorLink>\n\n</AnchorLinks>\n\n### Using just the styles\n\nDevelopers wanting to build in different ways follow the instructions for the [Vanilla](/get-started/develop/vanilla) library to access the styles and build out their own components.\n\n### Wrapping components with JavaScript frameworks\n\nMany JavaScript frameworks have a mechanism to dynamically create/destroy DOM elements, for example, upon change in array.\nThis often makes it unclear when the DOM element to instantiate a Carbon component is available, which often depends on the JavaScript framework you use.\n\nAlso when DOM elements that Carbon components have been instantiated on are being destroyed, the Carbon component instances should be released so that e.g. there are no zombie event handlers.\n\nThe easiest way to hook on the creation/destruction of DOM elements is by defining a \"wrapping component\", with the JavaScript framework of your choice. Here's an example using Web Components' [Custom Elements v1 spec](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements), but the notion of components, along with the lifecycle callbacks, are commonly found in many other JavaScript frameworks.\n\n```javascript\nclass BXLoading extends HTMLElement {\n  // Called when this custom element gets into render tree\n  connectedCallback() {\n    // \"this\" here is \"<bx-loading>\" element\n    this.innerHTML =\n      '(e.g. snippet from http://carbondesignsystem.com/components/loading/code)';\n    this.loading = CarbonComponents.Loading.create(\n      this.querySelector('[data-loading]')\n    );\n  }\n  // Called when this custom element gets out of render tree\n  disconnectedCallback() {\n    this.loading.release();\n  }\n}\ncustomElements.define('bx-loading', BXLoading);\n```\n\n### Examples\n\n[Angular 4 wrapper for Carbon](https://codepen.io/asudoh/pen/VryJBO?editors=1010) (We use this just as an example. [Angular](https://github.com/IBM/carbon-components-angular) is now supported by the Carbon Design System.)\n\n### Troubleshooting\n\nIf you experience any issues while getting set up with Carbon Components, please head over to the [Carbon Components GitHub repo](https://github.com/carbon-design-system/carbon-components) for more guidelines and support. Please [create an issue](https://github.com/carbon-design-system/carbon/issues) if your issue does not already exist.\n\n## Other frameworks?\n\nWe are open to the idea of providing core support for additional frameworks in future. We added Angular support in the summer of 2018 and Vue in early 2019.\n\nFor the Carbon Design System to incorporate additional frameworks into our core offering, those frameworks need clear, guaranteed, ongoing resources to maintain and support that option. If a team built a product using a native web components implemenation of Carbon, for example, but had no plan to support that solution outside of their product, that couldn't become a core part of the Carbon Design System.\n","fileAbsolutePath":"/fargate/7b444b50/src/pages/get-started/develop/other-frameworks.mdx"}}}}