open-index/open-npm huggingface dataset:
npm package: @maggieliu/reactive
Description: A javascript widget that adds reactions and comments to your site, using your own firebase database.
Latest version: 1.2.14

# Reactive

A javascript widget that adds reactions and comments to your site, using your own firebase database.

Check out the demo at: https://reactive-comments.vercel.app/

Documentation for adding Reactive to your own site: https://reactive-comments-docs.vercel.app/

Use with Next.js and on an HTML page:

- https://reactive-next-demo.vercel.app/
- https://reactive-html-demo.vercel.app/
npm package: @maggioli-design-system/magma-angular
Description: Magma Angular specific building blocks on top of [@maggioli-design-system/magma](https://www.npmjs.com/package/@maggioli-design-system/magma) components.
Latest version: 1.0.0-beta.1.11.4

# MagmaAngular

Magma Angular specific building blocks on top of [@maggioli-design-system/magma](https://www.npmjs.com/package/@maggioli-design-system/magma) components.

## Installation

Install package
```
npm i @maggioli-design-system/magma-angular
```

### NgModule

```
import { MagmaModule } from '@maggioli-design-system/magma-angular'

@NgModule({
  imports: [
   ...,
   MagmaModule.forRoot(),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

### Standalone

import module in `AppComponent`
```
import { MagmaModule } from '@maggioli-design-system/magma-angular'

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  imports: [..., MagmaModule],
})
export class AppComponent implements OnInit {}
```

set config for module in `app.config.ts`
```
import { MagmaModule } from '@maggioli-design-system/magma-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    ...,
    importProvidersFrom(MagmaModule.forRoot())
  ],
};
```
npm package: @maggioli-design-system/magma-react
Description: Magma React specific building blocks on top of [@maggioli-design-system/magma](https://www.npmjs.com/package/@maggioli-design-system/magma) components.
Latest version: 1.11.4

# MagmaReact

Magma React specific building blocks on top of [@maggioli-design-system/magma](https://www.npmjs.com/package/@maggioli-design-system/magma) components.


## Installation

Install package
```
npm i @maggioli-design-system/magma-react
```

### Icon
Set the path where the `mds-icon` component will get the svg icons inside `UseEffect` otherwise window is not defined

```ts
// app.js

export default function App({
  children,
}) {
  useEffect(() => {
    sessionStorage.setItem("mdsIconSvgPath", `/svg/`);
  }, []);

  return <>{children}</>;
}
```

Example using Nextjs with App Router

```tsx
// client_globals_wrapper.tsx
export default function ClientGlobalsWrapper({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  useEffect(() => {
    sessionStorage.setItem("mdsIconSvgPath", `/svg/`);
  }, []);

  return <>{children}</>;
}
```

```ts
// app/layout.tsx

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html>
      <body>
        <ClientGlobalsWrapper>
          <main>{children}</main>
        </ClientGlobalsWrapper>
      </body>
    </html>
  );
}

```

## Usage Example

```tsx
import { MdsText } from '@maggioli-design-system/magma-react'


export default function Component() {
  return (
    <MdsText typography="h3">Hello World</MdsText>
  );
}
```