open-index/open-npm huggingface dataset:
npm package: @hasanaburayyan/platform-awscdk
Description: Wing Platform for AWS CDK
Author: Wing Cloud
Latest version: 0.0.7

# AWSCDK Platform for Winglang

This custom Winglang Platform allows you to deploy your compiled Wing code to AWS CDK.

## Installation

From within your Wing project directory, run:
```bash
# Install the platform
npm i @winglang/platform-awscdk

# Compile your project
wing compile --platform @winglang/platform-awscdk <wing_entrypoint_file>
```
npm package: @hasanayan/react-error-overlay
Description: An overlay for displaying stack frames.
Author: Joe Haddad
Latest version: 6.0.9

# `react-error-overlay`

`react-error-overlay` is an overlay which displays when there is a runtime error.

## Development

When developing within this package, make sure you run `npm start` (or `yarn start`) so that the files are compiled as you work.
This is run in watch mode by default.

If you would like to build this for production, run `npm run build:prod` (or `yarn build:prod`).<br>
If you would like to build this one-off for development, you can run `NODE_ENV=development npm run build` (or `NODE_ENV=development yarn build`).
npm package: @hasanayan/react-scripts-2
Description: Configuration and scripts for Create React App.
Latest version: 4.0.3

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
npm package: @hasancruk/cruk-carousel
Description: This is an experimental Carousel component that closely mimicks CRUK's React Carousel component.
Author: Hasan Ali
Latest version: 0.3.0

# CRUK Carousel

A web component implementation of the CRUK React Carousel.

- [Demo](https://hasancruk.github.io/cruk-carousel/demo.html)

## Todo

- [ ] Explore container queries
- [ ] Explore how to distribute code that imports polyfills
- [ ] Remove default scrollbar 
- [ ] A component props for `image-width` based on aspect ratio like Shoelace 

## Installation

Via [`npm`](https://www.npmjs.com/package/@hasancruk/cruk-carousel) or download [`cruk-carousel.js`](./cruk-carousel.js) directly for use in your project.

```sh
npm install @hasancruk/cruk-carousel
```

## Usage

If you've installed it via `npm`, then you can import it into your project like this:

```sh 
import "@hasancruk/cruk-carousel";
```
npm package: @hasancruk/cruk-progress
Description: This is an experimental Progress component that closely mimicks CRUK's React Progress component.
Author: Hasan Ali
Latest version: 0.1.1

# CRUK Progress

A web component implementation of the CRUK Progress. The styling and implementation was taken from [Create an animated, circular progress bar](https://www.youtube.com/watch?v=MXWP56LUI3g) video by [Kevin Powell](https://www.kevinpowell.co/).

- [Demo](https://hasancruk.github.io/cruk-progress/demo.html)

## Todo

- [ ] Add documentation for browser compatibility

## Installation

Via [`npm`](https://www.npmjs.com/package/@hasancruk/cruk-progress) or download [`cruk-progress.js`](./cruk-progress.js) directly for use in your project.

```sh
npm install @hasancruk/cruk-progress
```

## Usage

If you've installed it via `npm`, then you can import it into your project like this:

```sh 
import "@hasancruk/cruk-progress";
```
npm package: @hasancruk/cruk-textarea
Description: This is an experimental component that makes textarea auto-resizeable.
Author: Hasan Ali
Latest version: 0.1.0

# CRUK Textarea

This is an experimental component that makes textarea auto-resizeable. The styling and implementation was inspired by the [CSS Tricks](https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/) post by [Chris Coyier](https://chriscoyier.net/).

- [Demo](https://hasancruk.github.io/cruk-textarea/demo.html)

## Installation

Via [`npm`](https://www.npmjs.com/package/@hasancruk/cruk-textarea) or download [`cruk-textarea.js`](./cruk-textarea.js) directly for use in your project.

```sh
npm install @hasancruk/cruk-textarea
```

## Usage

If you've installed it via `npm`, then you can import it into your project like this:

```sh 
import "@hasancruk/cruk-textarea";
```
npm package: @hasanparasteh/price-ticker
Description: This package helps you to create a price update animation with a simple component!
Author: Hasan Parasteh
Latest version: 0.1.0

# Price Ticker

This package helps you to create a price update animation with a simple component!

## How to install

you can install it via npm or any other altarnatives from `npmjs.com`

```bash
> npm install price-ticker
```

## How to use this 

First of all you need to import the component and after that pass the `price` variable into compoent! if you need any `css` customization please edit the `.ticker` class in your global css file!


**Example**

```vue
<template>
  <Ticker :price="price"></Ticker>
</template>

<script>
    import { ref } from "vue";
    import Ticker from "ticker.vue"

    const price = ref(50000); // Either you can pass Number or a formatted String
</script>
```

#### Available Props

```ts
price: number | string;
removeNumberEffect: number;
addNumberEffect: number;
```

#### Animation Customization
npm package: @hasansharif819/dynamic-react-button
Description: A customizable button component for React.js.
Author: Sharif Hasan
Latest version: 1.0.1

# Dynamic React Button

This package provides a fully customizable button component in React. You can customize the button text, link, color, border radius, padding, width, height, font size, and font weight.

## Installation

```bash
npm install dynamic-react-button