# ngx-mdr

> Matrix digital rain effect for Angular

Latest version **0.1.6** (published 2022-01-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-mdr
pnpm add ngx-mdr
yarn add ngx-mdr
bun add ngx-mdr
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2022-01-21 |
| First published | 2022-01-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 50.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | skynet yu |
| Maintainers | skynetchiuyu |
| Keywords | ngx-mdr, matrix, angular, raining letters |

## Links

- npm: https://www.npmjs.com/package/ngx-mdr
- Repository: https://github.com/SkynetYu/ngx-mdr
- Homepage: https://github.com/SkynetYu/ngx-mdr#readme
- Issues: https://github.com/SkynetYu/ngx-mdr/issues
- npm.io page: https://npm.io/package/ngx-mdr

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.1.6 (latest) — 2022-01-21
- 0.1.5 — 2022-01-21
- 0.1.4 — 2022-01-21
- 0.1.2 — 2022-01-21
- 0.1.1 — 2022-01-21
- 0.1.0 — 2022-01-21

## README

# Matrix Digital Rain Effect for Angular

React Matrix Digital Rain Effect gives you your favorite Matrix movie screen effect in the form of a React component. The source originates from an October 2021 blog article written by Adam Nagy, ["Matrix raining code effect using JavaScript"](https://dev.to/javascriptacademy/matrix-raining-code-effect-using-javascript-4hep).

## Preview
![alt text](https://raw.githubusercontent.com/SkynetYu/ngx-mdr/main/capscreen.JPG "Preview")

## Installation

Use the package manager [npm](https://docs.npmjs.com/cli/v8/commands/npm-install) to install .

```bash
npm i ngx-mdr -s
```

```typescript
// in app.module.ts
import { NgxMdrModule } from 'ngx-mdr';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    NgxMdrModule // import NgxMdrModule in here
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

```
## Usage
Optional 1:
```typescript
// in app.component.html
<ngx-mdr [settings]="settings"></ngx-mdr>

// in app.component.ts
import { MartixRainingLetterSettings } from 'ngx-mdr/lib/setting.model';

export class AppComponent implements {
  settings: MartixRainingLetterSettings = {
    canvasWidth: window.innerWidth,
    canvasHeight: window.innerHeight
  } as MartixRainingLetterSettings;
  ...
}
```

Optional 2:
```typescript
// in app.component.html
<canvas #canvas></canvas>

// in app.component.ts
import { RenderMatrix } from 'ngx-mdr';
import { MartixRainingLetterSettings } from 'ngx-mdr/lib/setting.model';
export class AppComponent implements, AfterViewInit {

  @ViewChild('canvas') canvas!: ElementRef<HTMLCanvasElement>;

  settings: MartixRainingLetterSettings = {
    canvasWidth: window.innerWidth,
    canvasHeight: window.innerHeight
  } as MartixRainingLetterSettings;

  ngAfterViewInit(): void {
    // call RenderMatrix() to render
    RenderMatrix(this.canvas, this.settings);
  }
}

```

## Settings
| Parameter      | Usage         | Type  |
| --------------:|--------------:| -----:|
| fontColor      | the text color of the rain | string|
| backgroundColor| the background color of the canvas | string|
| canvasWidth    | the width of the canvas      | number|
| canvasHeight   | the height of the canvas      | number|
| alphabet       | the text of the rain      | string|
| fontSize       | the text size of the rain     | number|

## Angular version
This library was generated with Angular CLI version 13.

## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## Author
Thanks in advance
Chiu Ho Yu

## License
[MIT](https://choosealicense.com/licenses/mit/)

---
_Source: https://npm.io/package/ngx-mdr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._