open-index/open-npm huggingface dataset:
npm package: @tamnt-work/vue-image-color
Description: Fill color for image
Latest version: 1.0.0

# Image Color

Fill color for image

## Installation

Use the package manager [NodeJS](https://nodejs.org/en/) to install vue-image-color.

```bash
yarn add @tamnt-work/vue-image-color
```

## Usage

Use global

```javascript
import Vue from "vue";
import ImageColor from "@tamnt-work/vue-image-color";

Vue.use(ImageColor);
```

OR

Use local

```javascript
import ImageColor from "@tamnt-work/vue-image-color";

export default {
  components: {
    ImageColor,
  },
};
```

Use on vue

```javascript
<image-color src="https://i.ibb.co/FhZb3Xs/CJcLK.png" color="red" width="50px" height="50px" alt="" />
```

## Props

### **color**

_Color want fill_

- String

### **src**

_Path to image_

- String

### **alt**

_alt properties img tag_

- String

### **width**

_Width of image_

- String

### **height**

_Height of image_

- String

## Contributing

contact@tamnt.work

## License

[MIT](https://choosealicense.com/licenses/mit/)
npm package: @tamnt-work/vue-ratio
Description: Scale with ratio for VueJS
Latest version: 1.0.7

# Vue Ratio

Scale with ratio for VueJS

## Installation

Use the package manager [NodeJS](https://nodejs.org/en/) to install @tamnt-work/vue-ratio.

```bash
yarn add @tamnt-work/vue-ratio
```

## Usage

Use global

```javascript
import Vue from "vue";
import VueRatio from "@tamnt-work/vue-ratio";

Vue.use(VueRatio);
```

OR

Use local

```javascript
import VueRatio from "@tamnt-work/vue-ratio";

export default {
  components: {
    VueRatio,
  },
};
```

Use on vue

```html
<vue-ratio ratio="16:9" width="100%">
  <img src="path-to-image.png" alt="" />
</vue-ratio>
```

## Props

### **ratio**

_Screen ratio want scales_

- Type: string
- Required: false

Example:

- 16:9 or 16/9
- 18:9 or 18/9
- 1:1 or 1/1
- 4:3 or 4/3
- etc...

### **width**

_Maximum width you want to display_

- Type: string
- Required: false

## Contributing

contact@tamnt.work

## License

[MIT](https://choosealicense.com/licenses/mit/)
npm package: @tamoroso_oc/react_modal_oc
Description: ---
Latest version: 1.0.1

# React_modal_oc

---

_Disclaimer : This project was made for training purposes. The librairy will not be maintained overtime. If you are interested in studying it’s anatomy feel free to clone the repository._

react_modal_oc is a library made for project 14 of OpenClassrooms’ Front-End developer course. It offers a simple React modal components with minimal dependencies.

## Dependencies :

This library was built by using [vite](https://vitejs.dev/guide/) build tool in library mode and its React typescript template.

- React
- React-dom

## Installation :

`npm install @tamoroso_oc/react_modal_oc`

## Usage :

```javascript
import { useState } from "react";
import { Modal } from "@tamoroso_oc/react_modal_oc";
import "./App.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faClose, faCheckCircle } from "@fortawesome/free-solid-svg-icons";

function App() {
  const [show, setShow] = useState(false);

  return (
    <div className="App">
      <button onClick={() => setShow(true)}>Open modal</button>
      <Modal show={show} style={{ padding: "2rem", minHeight: "min-content" }}>
        <div className="modal-header">
          <button onClick={() => setShow((prevState) => !prevState)}>
            <FontAwesomeIcon icon={faClose} />
          </button>
        </div>
        <div className="modal-content">
          <FontAwesomeIcon icon={faCheckCircle} size="2xl" color="green" />
          <h2>It's a test and it works</h2>
        </div>
      </Modal>
    </div>
  );
}

export default App;
```

**Props :**

- **show :** Boolean that determines of modal should be display or not ;
- Any props that can be passed down to a `<div/>` element ;

---

## If you want to add new components or modify the library :

- Clone the repository : `git clone https://github.com/tamoroso/react_modal_oc.git` ;
- Install dependencies : `npm install` ;
- Edit files according to your goals ;
- Build the library : `npm run build` ;
- Test your changes by statrting the react application in local ;

**Note :** You can edit this application to test the new features you have developed.