diff --git a/libs/ng-auto-animate/README.md b/libs/ng-auto-animate/README.md index ccd6b12..c68517b 100644 --- a/libs/ng-auto-animate/README.md +++ b/libs/ng-auto-animate/README.md @@ -2,35 +2,45 @@ An Angular Directive to use FormKit's [`auto-animate`](https://auto-animate.formkit.com) library within Angular projects. -### Highlights: +## Highlights + - ✅ Standalone Directive, for Angular v14 and above. Tested on Node 18.x, but should work on previous versions. - ✅ Custom `InjectionToken` for configuring global settings and plugins. -### Why a new wrapper library? +## Why a new wrapper library? + A publishable library for Angular needs [`ng-packagr`](https://github.com/ng-packagr/ng-packagr) and Angular CLI for proper scaffolding and finalized formatting. Migrating the repository structure for `auto-animate` is a non-trivial task and would need an unbiased build system like [Nx](https://nx.dev) (which I am using here) or some other similar tool. [Justin Schroeder](https://github.com/justin-schroeder), the creator of [`auto-animate`](https://auto-animate.formkit.com), has been supportive towards [contributions](https://github.com/formkit/auto-animate/pull/38) for Angular integration, but he [does not work with Angular](https://github.com/formkit/auto-animate/issues/72#issuecomment-1222732238) and is unable to work towards this actively. I, too, would not be able to do much in his shoes, especially when it requires replacing all build actions, scripts and the project structure, all to support a single framework. If there is a simpler solution, I would be willing to submit a PR with my changes here to the original project, especially the support for global options/plugin via an `InjectionToken`. -### Installation +## Installation + 1. Install the peer dependency. + ```bash npm i @formkit/auto-animate ``` + 1. Install this package. + ```bash npm i ng-auto-animate ``` -### Usage -#### Principle +## Usage + +### Principle + Add the directive to the parent tag, within which DOM elements are being shown or hidden dynamically. Adding the directive to the same tag which is being hidden will do nothing since it will look for changes in child nodes only. -#### Variants +### Variants + 1. Default usage: + ```html

@@ -38,7 +48,9 @@ Adding the directive to the same tag which is being hidden will do nothing since

``` + 1. Pass one-off options: + ```html

@@ -46,7 +58,9 @@ Adding the directive to the same tag which is being hidden will do nothing since

``` + 1. Configure global default options: + ```ts // src/app/app.config.ts import { ApplicationConfig } from '@angular/core'; @@ -75,6 +89,7 @@ Adding the directive to the same tag which is being hidden will do nothing since console.error(err) ); ``` + ```html

@@ -82,20 +97,23 @@ Adding the directive to the same tag which is being hidden will do nothing since

``` + 1. Pass a custom plugin > See the example here in the [demo app](https://github.com/ajitzero/ng-auto-animate/blob/0f305d97a9a30ab715b1c41304572519f0d27894/apps/demo/src/app/app.component.ts#L68) for a "bouncy" effect. + ```ts customPlugin: AutoAnimationPlugin = (...) => {...}; ``` + ```html
...
``` -### Missing support for something? +## Missing support for something? Go through existing issues if your problem is already being tracked; otherwise, [raise an issue!](https://github.com/ajitzero/ng-auto-animate/issues/new/choose) -### License +## License [MIT](https://github.com/ajitzero/ng-auto-animate/blob/main/LICENSE).