{"id":15154643,"url":"https://github.com/twicpics/react","last_synced_at":"2025-09-30T03:30:42.827Z","repository":{"id":52437695,"uuid":"345811355","full_name":"TwicPics/react","owner":"TwicPics","description":"This package has been deprecated in favor of \"TwicPics Components\" 👉 https://github.com/TwicPics/components","archived":true,"fork":false,"pushed_at":"2021-10-08T08:58:40.000Z","size":783,"stargazers_count":13,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-11-22T22:55:38.397Z","etag":null,"topics":["image","image-processing","react","react-component","reactjs","twicpics"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TwicPics.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-08T22:20:29.000Z","updated_at":"2023-01-28T06:04:30.000Z","dependencies_parsed_at":"2022-09-12T21:41:22.900Z","dependency_job_id":null,"html_url":"https://github.com/TwicPics/react","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TwicPics%2Freact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TwicPics%2Freact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TwicPics%2Freact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TwicPics%2Freact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TwicPics","download_url":"https://codeload.github.com/TwicPics/react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234695605,"owners_count":18873009,"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":["image","image-processing","react","react-component","reactjs","twicpics"],"created_at":"2024-09-26T17:42:59.743Z","updated_at":"2025-09-30T03:30:42.517Z","avatar_url":"https://github.com/TwicPics.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @twicpics/react\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n\n\u003e [TwicPics](https://www.twicpics.com) integration with React.\n\n---\n\n## ⚠️ Deprecation warning ⚠️\n\n**This package has been deprecated in favor of [TwicPics Components](https://github.com/TwicPics/components).**\n\n[TwicPics Components](https://github.com/TwicPics/components) is a collection of web components that make it dead easy to unleash the power of [TwicPics](https://www.twicpics.com) in your own projects and using the framework of your choice.\n\n👉 [Check the documentation](https://github.com/TwicPics/components/tree/main/documentation)\n\n---\n\n## Setup\n\n1.  Add `@twicpics/react` dependency to your project\n\n```bash\nyarn add @twicpics/react\n# or npm install @twicpics/react\n```\n\n2.  Setup\n\n```js\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\n\nimport { TwicPics } from \"@twicpics/react\";\n\nTwicPics({\n  domain: \"https://demo.twic.pics\",\n  anticipation: 0.5,\n  maxDPR: 2,\n  step: 100,\n});\n\nReactDOM.render(\n  \u003cReact.StrictMode\u003e\n    \u003cApp /\u003e\n  \u003c/React.StrictMode\u003e,\n  document.getElementById(\"root\")\n);\n```\n\n## Options\n\n### `domain` (required)\n\nThis is your very own [TwicPics domain](https://www.twicpics.com/docs/getting-started/subdomain/). \n\n### `anticipation`\n\n*   Default value: `0.2` (any value that is not a number will be ignored)\n\nTwicPics will lazy-load images by default. To avoid too abrupt a transition with elements appearing into view and then images very obviously loading afterwards, TwicPics will \"anticipate\" lazy loading by a factor of the actual viewport. This behavior is controlled by this setting.\n\n### `maxDPR`\n\n*   Default value: `2` (any value that is not a number will be ignored)\n\nTwicPics will take the Device Pixel Ratio of the current device into consideration when determining the sizes of images to load. By default, it will not take a DPR greater than 2 into consideration. If the DPR of the device is higher than 2, TwicPics will assume it to be 2. So you can lower it to 1 or be more permissive (for instance by setting it to 3 or 4).\n\n### `step`\n\n*   Default value: `10` (any value that is not a number will be ignored)\n\nTo avoid requesting too may variants of the same image, TwicPics will round the width of images to the closest multiple of step. The height will then be computed in order to respect the original aspect ratio.\n\n## Usage\n\n### `TwicImg` component\n\n```html\n\u003cTwicImg \n  src=\"\u003cimage-path\u003e\"\n  width=\"\u003cinteger\u003e\"\n  height=\"\u003cinteger\u003e\"\n  placeholder=\"\u003cnone|preview|meancolor|maincolor\u003e\"\n  mode=\"\u003ccontain|cover\u003e\"\n  position=\"\u003ccss position\u003e\"\n  ratio=\"\u003cratio\u003e\"\n  step=\"\u003cinteger\u003e\"\n  focus=\"\u003cauto|coordinates\u003e\"\n  transition=\"\u003cboolean\u003e\"\n/\u003e\n```\n\n| Name | Description | Type | Default | Required |\n|------|-------------|------|---------|----------|\n| `src` | Absolute or relative path to an image. | `String` | | `true` |\n| `width` | See `ratio`. | `Integer` | | `false` |\n| `height` | See `ratio`. | `Integer` | | `false` |\n| `ratio` | Unitless `width/height` value pair. You can either use `ratio` or `width` and `height` to set the aspect-ratio of the area your image will be in. If both are used, `ratio` win. A squared area will be created by default. | `String` | `1/1` | `false` |\n| `placeholder` | Can be `preview`, `meancolor`, `maincolor` or `none`. | `String` | `preview` | `false` |\n| `mode` | Can be `contain` or `cover` and determines if the image fills the area and is cropped accordingly (`cover`) or if the image will sit inside the area with no cropping (`contain`). | `String` | `cover` | `false` |\n| `position` | Only useful in `contain` mode. Locates the image inside the area. Syntax is the same as for CSS position properties like [background-position](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) or [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position). Useful values are `top`, `bottom`, `left`, `right`, `left top`, `left bottom` and so on. | `String` | `center` | `false` |\u001c\u001c \n| `step` | See [TwicPics documentation](https://www.twicpics.com/docs/script/attributes#data-twic-step) for details. | `Integer` | `10` | `false` |\n| `focus` | Only useful in `cover` mode. Can be `auto` or coordinates - see [TwicPics documentation](https://www.twicpics.com/docs/script/attributes#data-twic-focus) for details. | `String` | `10` | `false` |\n| `transition` | Whether or not to load images with a fade in effect. | `Boolean` | `true` | `false` |\n| `transitionDuration` | Duration of the transition effect. | `String` | `400ms` | `false` |\n| `transitionTimingFunction` | CSS timing function applied to the transition effect. | `String` | `ease` | `false` |\n| `transitionDelay` | Transition delay of the transition effect. | `String` | `0ms` | `false` |\n| `alt` | `alt` attribute content | `String` | Image name without extention | `false` |\n\n### Example\n\n```js\nimport TwicImg from \"@twicpics/react\";\nimport \"@twicpics/react/build/twicpics.css\";\n\nfunction App() {\n  return (\n    \u003cmain\u003e\n      \u003cTwicImg\n        src=\"/my-image.jpg\"\n        ratio=\"16/9\"\n        step=\"100\"\n        focus=\"auto\"\n        placeholder=\"preview\"\n      /\u003e\n    \u003c/main\u003e\n  );\n}\n\nexport default App;\n```\n\n## Demo\n\n[![Edit TwicPics React](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/twicpics-react-miyzz?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## License\n\n[MIT License](./LICENSE)\n\nCopyright (c) TwicPics\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/@twicpics/react/latest.svg\n[npm-version-href]: https://npmjs.com/package/@twicpics/react\n\n[npm-downloads-src]: https://img.shields.io/npm/dt/@twicpics/react.svg\n[npm-downloads-href]: https://npmjs.com/package/@twicpics/react\n\n[license-src]: https://img.shields.io/npm/l/@twicpics/react.svg\n[license-href]: https://npmjs.com/package/@twicpics/react\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwicpics%2Freact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwicpics%2Freact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwicpics%2Freact/lists"}