{"id":16513709,"url":"https://github.com/nitin42/react-tint","last_synced_at":"2025-03-21T08:31:29.554Z","repository":{"id":87330575,"uuid":"116036265","full_name":"nitin42/react-tint","owner":"nitin42","description":"A React component that applies image processing filters to an image using Processing","archived":false,"fork":false,"pushed_at":"2018-01-16T17:26:22.000Z","size":1223,"stargazers_count":85,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-01T04:31:47.442Z","etag":null,"topics":["canvas","image-processing","p2d","processing","processingjs","react","web","webgl"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nitin42.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-02T16:44:49.000Z","updated_at":"2023-10-12T05:44:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"cfee16b6-69b9-44aa-a4db-2063fe354745","html_url":"https://github.com/nitin42/react-tint","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-tint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-tint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-tint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-tint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nitin42","download_url":"https://codeload.github.com/nitin42/react-tint/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244124191,"owners_count":20401685,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","image-processing","p2d","processing","processingjs","react","web","webgl"],"created_at":"2024-10-11T16:10:00.473Z","updated_at":"2025-03-21T08:31:29.548Z","avatar_url":"https://github.com/nitin42.png","language":"JavaScript","readme":"# react-tint\n\n![size-label](https://img.shields.io/badge/size-4.3%20KB-brightgreen.svg)\n\n\u003e A React component that applies image processing filters to an image using Processing\n\n\u003cimg src=\"./art/Demo.gif\"\u003e\n\n## Install\n\n```\nyarn add react-tint\n```\n\nThis package also depends on React, so make sure you've already installed it.\n\n## Usage\n\n`react-tint` exposes only a single component, `\u003cImageTint /\u003e`, that takes [different props]() as filters and an image, and applies them and returns a new canvas.\n\n```js\nimport React, { Component } from 'react'\nimport ImageTint from 'react-tint'\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cImageTint\n        canvas={{ height: 500, width: 500, renderer: 'P2D' }}\n        tint=\"blue\"\n        src=\"Sunflower.jpg\"\n        style={{ margin: 'auto', width: '50%', padding: '20px' }}\n      /\u003e\n    )\n  }\n}\n```\n\n## API\n\n### ImageTint\n\nA component that applies image processing filters using Processing.\n\n#### Props\n\n* **`canvas`**\n\n`canvas` prop takes an object with three properties - `height`, `width` and a `renderer` type.\n\nExample -\n\n```js\n\u003cImageTint canvas={{ width: 200, height: 200, renderer: 'WEBGL'}} /\u003e\n```\n\nTwo types of renderers are supported, **WEBGL** and **P2D**.\n\nThe P2D renderer uses OpenGL for faster rendering of two-dimensional graphics but at the expense of speed.\n\n* **`tint`**\n\n`tint` takes different types of data for an image. It can take a simple **string of color name**, **array of values** that includes Red, Green, Blue and alpha value for image transparency and **an object that describes color and alpha channel**.\n\nExample -\n\n**Color name**\n\n```js\n\u003cImageTint tint=\"red\" /\u003e\n```\n\n**Array of values**\n\n```js\n\u003cImageTint tint={[100, 120, 100, 65]} /\u003e\n```\n\nThis array corresponds to =\u003e `[RED, GREEN, BLUE, ALPHA]`\n\n**Object describing color and alpha value**\n\n```js\n\u003cImageTint tint={{ color: 255, alpha: 30 }}\n```\n\nThe above code retains the original color of an image and applies transparency with value `30`.\n\nSo its up to you how declare the values using the `tint` prop.\n\n* **`src`**\n\n`src` prop takes an image path\n\nExample -\n\n```js\n\u003cImageTint src=\"path/to/image\"\n```\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Freact-tint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitin42%2Freact-tint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Freact-tint/lists"}