open-index/open-npm huggingface dataset:
npm package: @iic2513/generator-template
Description: Project template generator for IIC2513 course at Pontificia Universidad Catolica de Chile
Author: Gabriel Vidal
Latest version: 1.2.0

# IIC2513 - Project Generator

![build](https://github.com/IIC2513/generator-template/workflows/build/badge.svg)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![npm-version](https://img.shields.io/npm/v/@iic2513/generator-template?logo=npm)](https://www.npmjs.com/package/@iic2513/generator-template)

Finally, after a few semesters, we are releasing a public version of our template. Now, any user can contribute to this package and add new cool features!

The first version was developed some time ago (you can see the repo [here](https://github.com/IIC2513/template)), and then we just updated the dependencies.

## Prerequisites

To run this generator (based on [Yeoman](https://yeoman.io/)):

* NodeJS LTS (10.x or 12.x)
* Yarn
* Yeoman:

```bash
$ npm install -g yo
```

## Installation

To install the generator:

```bash
$ npm install -g @iic2513/generator-template
```

## How does it work?

All the information about this generator and the template are in our [Wiki](https://github.com/IIC2513/template-generator/wiki).

## Contributing

Yes! If you want to add new features to this project:

1. Fork this repo
2. Implement your feature
3. Do a pull request

Some details:

* Our commit messages follows [Angular Commit Message Conventions](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines), in order to use [Semantic Versioning specification](https://semver.org/)
* Don't forget tests :smile:
npm package: @iicoding/auto-animate
Description: #### 利用 MutationObserver 实现节点的变化监听， ResizeObserver 实现窗口变化监听
Latest version: 0.0.10

### 自动动画组件底层实现包

#### 利用 MutationObserver 实现节点的变化监听， ResizeObserver 实现窗口变化监听

#### 上层各框架可根据框架实现 封装组件。

##### 在 React 中上层封装
```react
import { memo, useRef, useEffect } from 'react';
import autoAnimate from '@ii-coding/auto-animate';
import type { ReactNode, ReactElement, FC } from 'react';
import type { AutoAnimateOptions } from '@ii-coding/auto-animate/type';

interface IProps extends Partial<AutoAnimateOptions> {
  children: ReactNode | ReactElement;
  className?: string;
}

const A: FC<IProps> = (props) => {
  const { children, className, ...animateOptions } = props;

  const containerRef = useRef<HTMLDivElement | null>(null);
  const animateRef = useRef<ReturnType<typeof autoAnimate> | null>(null);

  useEffect(() => {
    if (containerRef.current) {
      animateRef.current = autoAnimate(containerRef.current, animateOptions);
    }

    return () => {
      animateRef.current?.dispose();
    };
  }, []);

  return (
    <div ref={containerRef} className={className}>
      {children}
    </div>
  );
};

const AutoAnimate = memo(A);

export default AutoAnimate;
```
#### 未完成事项：
    - 具体调用配置参数未底层逻辑实现
    - 各上层框架组件封装案例未完善
    - 组件封装调用的自动化控制未实现

> 计划在1.0版本中 实现以上待办