## Install ```bash yarn install @sebgroup/green-core # or use npm npm install @sebgroup/green-core ``` ## Use The components in Green Core are standard web components, so you can use them with or without any framework, but since most consumers will be useing Angular or React, some extra convenience features are provided for these frameworks. Web components needs to be defined in the custom elements registry before they can be used, and there are a few different ways of handling this: - Use a sub-path side-effect import: ```ts import '@sebgroup/green-core/components/button/index.js' ``` This will automatically register the component in the custom elements registry, and you can use it immediately, but it will not be tree-shakable, so it will be included in your bundle whether you use it or not. - Use a pure import and define separately: ```ts // Import the component class import { GdsButton } from '@sebgroup/green-core/pure' // Call define to register with the custom elements registry GdsButton.define() ``` - For POCs and prototyping where you just want to gain access to all the components quickly, you can import everything at once: ```ts import '@sebgroup/green-core/everything' ``` This will import all components and icons, and register them in the custom elements registry. This is not tree-shakable and not recommended for production use, as it will include everything in your bundle (~700kb). ### Scoping Finally, you need to handle [scoping](/docs/concepts-scoping--docs) of the element names. This is done automatically for React, and for Lit and Angular we provide simple solutions (see below), but if you are using the components in some other way, you need to set up your own solution or disable scoping. For POCs and prototyping, you can disable scoping by setting the `GDS_DISABLE_VERSIONED_ELEMENTS` global variable to `true` before importing any components. This will make all components use their original element names (e.g. `` instead of ``). ```html ... ``` ***Warning:** Never disable scoping for a microfrontend or production application, as this will cause conflicts with other applications using the same components.* ## Using with Angular Angular has support for using web components directly. To enable this support, you need to do the following: - Add the `CUSTOM_ELEMENTS_SCHEMA` in the module where you plan to use the components. - Provide `NggCoreRenderer` or import `NggCoreWrapperModule` to handle Green Core's element name scoping. The renderer is more convenient, but the wrapper module can provide more explicit control. For a more detailed break-down of how to use Green Core components with Angular, and some additional information about use with the router, see the full [Angular guide](/docs/guides-angular--docs). Below is a minimal example using the renderer. **In your module:** ```ts @NgModule({ // Provides `NggCoreRenderer` as a custom renderer providers: [provideCoreRenderer(getScopedTagName)], // CUSTOM_ELEMENTS_SCHEMA is still needed schemas: [CUSTOM_ELEMENTS_SCHEMA], }) ``` If you need animations, use `provideCoreRendererWithAnimations()` instead, and make sure to import `BrowserAnimationsModule` too. **In your component:** ```ts import '@sebgroup/green-core/components/button/index.js' ``` **In your template:** ```html Click me! ``` ## Using with React React 19 has built-in support for web components, and Green Core automatically generates typed JSX wrappers for all components and icons. This means you can use the components directly in your JSX templates. For example: ```ts ``` Then, in your JSX template: ```tsx console.log('Hello')}> Click me! ``` These imports are tree-shakable and the underlying web components will be defined automatically on first use. For full details on how to use Green Core with React, and how to handle older React versions (pre 19), see the full [React guide](/docs/guides-react--docs). ## Using with Lit The components in Green core rely on the Lit framework for their internal implementations, and it is of course also possible to use the components in applications or other components using Lit. Here is a minimal example: ```ts // This custom `html` template literal tag from Green Core extends the default `lit-html` tag to handle element version scoping. // Import the components that you need import '@sebgroup/green-core/components/button/index.js' @customElement('my-app') export class MyApp extends LitElement { static styles = css`` connectedCallback() { super.connectedCallback() } render() { return html`Click me!` } } ```