open-index/open-npm huggingface dataset:
npm package: @girishsawant999/react-image-edit
Description: A react package to crop, rotate & resize image before upload or save
Author: Girish Sawant
Latest version: 2.0.1

<p align="center">
  <a href="#" rel="noopener">
 <img height=200px src="./.github/readme/intro.png" alt="Project logo"></a>
</p>

<h2 align="center">React Image Edit</h2>

<div align="center">

[![Status](https://img.shields.io/badge/status-active-success.svg)](#)
[![GitHub Issues](https://img.shields.io/github/issues/girishsawant999/image-edit-tool.svg)](https://github.com/girishsawant999/image-edit-tool/issues)
[![GitHub Pull Requests](https://img.shields.io/github/issues-pr/girishsawant999/image-edit-tool.svg)](https://github.com/girishsawant999/image-edit-tool/pulls)

[![Build ](https://img.shields.io/github/workflow/status/girishsawant999/image-edit-tool/CI/main)](https://github.com/girishsawant999/image-edit-tool/actions)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)

</div>

---

<p align="center"> A react npm package to crop, rotate & resize image before saving or upload.
    <br> 
</p>

<p align="center">
  <a href="https://girishsawant999.github.io/image-edit-tool/" target="_blank">
    React Image Edit Playground
  </a>
</p>

## 📝 Usage

Just install the package using command

```
npm install @girishsawant999/react-image-edit
```

And then import component in your react app

```javascript
import ImageEditor from '@girishsawant999/react-image-edit';

// Use ImageEditor Component

<ImageEditor src={defaultURL} onSave={(url): void => setUrl(url)} saveButtonText="Preview" />;
```

That's all and you are ready to go.

## 📃 Props

| Prop               | Types                     | Description                                                                   |
| ------------------ | ------------------------- | ----------------------------------------------------------------------------- |
| src                | string                    | An image source url                                                           |
| onSave             | (url: string) => void     | A callback function on save button click gives you updated image url          |
| maxWidth           | number <br> Default: 600  | Final resize width for updated image height will be according to aspect ratio |
| saveButtonText     | string <br> Default: Save | Button text for final save update                                             |
| containerClassName | string                    | Classes for container                                                         |
| imgClassName       | string                    | Classes for Image tag                                                         |
| toolbarClassName   | string                    | Classes for toolbar div                                                       |
npm package: @girishsawant999/react-loading-button
Description: A react component for loading button with animation
Author: Girish Sawant
Latest version: 1.0.8

<p align="center">
  <a href="https://girishsawant999.github.io/react-loading-button/" rel="noopener">
 <img height="120" src="./.github/readme/intro.gif" alt="Project logo"></a>
</p>

<h2 align="center">React Loading Button</h2>

<div align="center">

[![Status](https://img.shields.io/badge/status-active-success.svg)](#)
[![GitHub Issues](https://img.shields.io/github/issues/girishsawant999/react-loading-button.svg)](https://github.com/girishsawant999/react-loading-button/issues)
[![GitHub Pull Requests](https://img.shields.io/github/issues-pr/girishsawant999/react-loading-button.svg)](https://github.com/girishsawant999/react-loading-button/pulls)

[![Build ](https://img.shields.io/github/workflow/status/girishsawant999/react-loading-button/CI/main)](https://github.com/girishsawant999/react-loading-button/actions)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)

</div>

---

<p align="center">
A small react loading button component for getting flexibility to show other content instead of full screen loader while submitting API request.
</p>

<p align="center">
  <a href="https://girishsawant999.github.io/react-loading-button/" target="_blank">
    React loading Button Playground
  </a>
</p>

## 📝 Usage

Just install the package using command

```
npm install @girishsawant999/react-loading-button
```

And then import component in your react app

```javascript
import Button from '@girishsawant999/react-loading-button';

// Use Button Component

<Button loading={isLoading}>Loading Button</Button>;
```

That's all and you are ready to go.

## 📃 Props

| Prop       | Types                                                                                                                                              | Description                                                 |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| loading    | Boolean<br>Default: `false`                                                                                                                        | Added loader in button when value is `true`                 |
| buttonType | `primary`, `secondary`, `danger`, `success`, `warning`, `info`, `light`, `dark`, `glass`<br/>Default: `primary`                                    | Set type of layout to button you can check it on playground |
| loader     | `spinner`, `circle-notch`, `three-dots`, `ball-triangle`, `bars`, `filling-box`, `puff`, `half-circles`, `circular-stripes`<br/>Default: `spinner` | Set type of loader in button while loading                  |

Additionally you can pass any other props to button
npm package: @giro3d/function-curve-editor
Description: A function curve editor widget / web component
Latest version: 1.0.17

# function-curve-editor

This package implements a function curve editor that runs within a HTML page in the web browser.
It can be used in widget mode (with a HTML canvas element) or as a [web component](https://en.wikipedia.org/wiki/Web_Components) (HTML custom element).

NPM package: [function-curve-editor](https://www.npmjs.com/package/function-curve-editor)<br>
Online demo: [www.source-code.biz/snippets/typescript/functionCurveEditor](https://www.source-code.biz/snippets/typescript/functionCurveEditor)<br>
Examples of how to use it: [github.com/chdh/function-curve-editor/tree/master/examples](https://github.com/chdh/function-curve-editor/tree/master/examples)