{"id":17114647,"url":"https://github.com/algolia/recommend","last_synced_at":"2025-04-05T08:06:52.409Z","repository":{"id":36964668,"uuid":"360214619","full_name":"algolia/recommend","owner":"algolia","description":"A UI library for Algolia Recommend, available for Vanilla JavaScript and React.","archived":false,"fork":false,"pushed_at":"2024-12-18T11:21:06.000Z","size":12953,"stargazers_count":28,"open_issues_count":6,"forks_count":11,"subscribers_count":47,"default_branch":"next","last_synced_at":"2025-03-28T19:11:51.316Z","etag":null,"topics":["algolia","ia","javascript","react","recommend","recommendations","widgets"],"latest_commit_sha":null,"homepage":"https://www.algolia.com/doc/ui-libraries/recommend/introduction/what-is-recommend/","language":"TypeScript","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/algolia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2021-04-21T15:13:49.000Z","updated_at":"2024-12-18T11:15:43.000Z","dependencies_parsed_at":"2024-01-29T14:49:17.766Z","dependency_job_id":"eed8bb2f-7452-4e2a-b149-ab8147b54498","html_url":"https://github.com/algolia/recommend","commit_stats":{"total_commits":238,"total_committers":19,"mean_commits":"12.526315789473685","dds":0.6176470588235294,"last_synced_commit":"9b4f553cebd4775cefc0b3e26f5323d9ef66541b"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Frecommend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Frecommend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Frecommend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Frecommend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/algolia","download_url":"https://codeload.github.com/algolia/recommend/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305934,"owners_count":20917208,"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":["algolia","ia","javascript","react","recommend","recommendations","widgets"],"created_at":"2024-10-14T17:19:36.532Z","updated_at":"2025-04-05T08:06:52.391Z","avatar_url":"https://github.com/algolia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e 🙌 From now on you can use Algolia Recommend from InstantSearch, simplifying your integration between the two libraries!\n\u003e\n\u003e Learn how to migrate following the [upgrade guide for JS](https://www.algolia.com/doc/guides/algolia-recommend/upgrade/recommend-js/) or [for React](https://www.algolia.com/doc/guides/algolia-recommend/upgrade/recommend-react/).\n\n\n```js\nimport instantsearch from 'instantsearch.js';\nimport {\n  frequentlyBoughtTogether,\n  relatedProducts,\n} from 'instantsearch.js/es/widgets';\nimport algoliasearch from 'algoliasearch/lite';\nconst searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');\n\ninstantsearch({\n  // No need for a recommendClient anymore\n  searchClient,\n  indexName,\n}).addWidgets([\n  frequentlyBoughtTogether({\n    container: '#frequentlyBoughtTogether',\n    objectIDs: [currentObjectID],\n  }),\n  relatedProducts({\n    container: '#relatedProducts',\n    objectIDs: [currentObjectID],\n  }),\n]);\n```\n\n```jsx\nimport {\n  InstantSearch,\n  FrequentlyBoughtTogether,\n  RelatedProducts,\n} from 'react-instantsearch';\nimport algoliasearch from 'algoliasearch/lite';\nconst searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');\n\nfunction App() {\n  return (\n    \u003cInstantSearch searchClient={searchClient} indexName={indexName}\u003e\n      \u003cFrequentlyBoughtTogether objectIDs={[currentObjectID]} /\u003e\n      \u003cRelatedProducts objectIDs={[currentObjectID]} /\u003e\n    \u003c/InstantSearch\u003e\n  );\n}\n```\n\n---\n---\n---\n\n# Recommend\n\n[![Version](https://img.shields.io/npm/v/@algolia/recommend-js.svg?style=flat-square)](https://www.npmjs.com/package/@algolia/recommend-js) [![MIT License](https://img.shields.io/badge/License-MIT-green.svg?style=flat-square)](LICENSE)\n\nRecommend is the repository packaging the UI components for Algolia Recommend, available for Vanilla JavaScript and React.\n\n## Installation\n\nAll Recommend packages are available on the [npm](https://www.npmjs.com/) registry.\n\n### For [JavaScript](/packages/recommend-js)\n\n```bash\nyarn add @algolia/recommend-js\n# or\nnpm install @algolia/recommend-js\n```\n\n### For [React](/packages/recommend-react)\n\n```bash\nyarn add @algolia/recommend-react\n# or\nnpm install @algolia/recommend-react\n```\n\n## Usage\n\n### For [JavaScript](/packages/recommend-js)\n\nTo get started, you need a container for your recommendations to go in—in this guide, one for Frequently Bought Together, and one for Related Products. If you don't have containers already, you can insert them into your markup:\n\n```html\n\u003cdiv id=\"frequentlyBoughtTogether\"\u003e\u003c/div\u003e\n\u003cdiv id=\"relatedProducts\"\u003e\u003c/div\u003e\n```\n\nThen, insert your recommendations by calling the [`frequentlyBoughtTogether`](https://www.algolia.com/doc/ui-libraries/recommend/api-reference/recommend-js/frequentlyBoughtTogether/) function and providing the [`container`](https://www.algolia.com/doc/ui-libraries/recommend/api-reference/recommend-js/frequentlyBoughtTogether/#param-container). It can be a [CSS selector](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) or an [Element](https://developer.mozilla.org/docs/Web/API/HTMLElement).\n\nThe process is the same for [`relatedProducts`](https://www.algolia.com/doc/ui-libraries/recommend/api-reference/recommend-js/relatedProducts/).\n\n```jsx\n/** @jsx h */\nimport { h } from 'preact';\nimport {\n  frequentlyBoughtTogether,\n  relatedProducts,\n} from '@algolia/recommend-js';\nimport recommend from '@algolia/recommend';\n\nconst recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');\nconst indexName = 'YOUR_INDEX_NAME';\nconst currentObjectID = 'YOUR_OBJECT_ID';\n\nfrequentlyBoughtTogether({\n  container: '#frequentlyBoughtTogether',\n  recommendClient,\n  indexName,\n  objectIDs: [currentObjectID],\n  itemComponent({ item }) {\n    return (\n      \u003cpre\u003e\n        \u003ccode\u003e{JSON.stringify(item)}\u003c/code\u003e\n      \u003c/pre\u003e\n    );\n  },\n});\n\nrelatedProducts({\n  container: '#relatedProducts',\n  recommendClient,\n  indexName,\n  objectIDs: [currentObjectID],\n  itemComponent({ item }) {\n    return (\n      \u003cpre\u003e\n        \u003ccode\u003e{JSON.stringify(item)}\u003c/code\u003e\n      \u003c/pre\u003e\n    );\n  },\n});\n```\n\n### For [React](/packages/recommend-react)\n\nImport the [`FrequentlyBoughtTogether`](https://www.algolia.com/doc/ui-libraries/recommend/api-reference/recommend-react/FrequentlyBoughtTogether/) and [`RelatedProducts`](https://www.algolia.com/doc/ui-libraries/recommend/api-reference/recommend-react/RelatedProducts/) and use them in your parent component.\n\n```JSX\nimport React from 'react';\nimport {\n  FrequentlyBoughtTogether,\n  RelatedProducts,\n} from '@algolia/recommend-react';\nimport recommend from '@algolia/recommend';\n\nconst recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');\nconst indexName = 'YOUR_INDEX_NAME';\n\nfunction App({ currentObjectID }) {\n  // ...\n\n  return (\n    \u003cdiv\u003e\n      \u003cFrequentlyBoughtTogether\n        recommendClient={recommendClient}\n        indexName={indexName}\n        objectIDs={[currentObjectID]}\n        itemComponent={({ item }) =\u003e {\n          return (\n            \u003cpre\u003e\n              \u003ccode\u003e{JSON.stringify(item)}\u003c/code\u003e\n            \u003c/pre\u003e\n          );\n        }}\n      /\u003e\n      \u003cRelatedProducts\n        recommendClient={recommendClient}\n        indexName={indexName}\n        objectIDs={[currentObjectID]}\n        itemComponent={({ item }) =\u003e {\n          return (\n            \u003cpre\u003e\n              \u003ccode\u003e{JSON.stringify(item)}\u003c/code\u003e\n            \u003c/pre\u003e\n          );\n        }}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nContinue reading our [**Getting Started**](https://www.algolia.com/doc/ui-libraries/recommend/introduction/getting-started/#displaying-recommendations) guide.\n\n## Documentation\n\nThe [documentation](https://www.algolia.com/doc/ui-libraries/recommend/introduction/what-is-recommend/) offers a few ways to learn about the Recommend library:\n\n- Follow the [**Building your Recommend UI guide**](https://www.algolia.com/doc/guides/algolia-ai/recommend/#building-your-recommendation-ui) to display recommendations on your website.\n- Refer to the [**JavaScript API reference**](https://www.algolia.com/doc/ui-libraries/recommend/api-reference/recommend-js/) or [**React API reference**](https://www.algolia.com/doc/ui-libraries/recommend/api-reference/recommend-react/) for a comprehensive list of parameters and options.\n- Try out the [**Playground**](https://codesandbox.io/s/github/algolia/recommend/tree/next/examples/playground?file=/app.tsx) where you can fork a basic implementation and play around.\n\nYou can find more on the [documentation](https://www.algolia.com/doc/ui-libraries/recommend/introduction/what-is-recommend/).\n\n## Support\n\n- [GitHub Discussions](https://github.com/algolia/recommend/discussions)\n\n## Packages\n\n- [`@algolia/recommend-core`](/packages/recommend-core): Core package for [Algolia Recommend](https://www.algolia.com/doc/guides/algolia-ai/recommend/)\n- [`@algolia/recommend-js`](/packages/recommend-js): JavaScript package for [Algolia Recommend](https://www.algolia.com/doc/guides/algolia-ai/recommend/)\n- [`@algolia/recommend-react`](/packages/recommend-react): React package for [Algolia Recommend](https://www.algolia.com/doc/guides/algolia-ai/recommend/)\n- [`@algolia/recommend-vdom`](/packages/recommend-vdom): VDOM package for [Algolia Recommend](https://www.algolia.com/doc/guides/algolia-ai/recommend/)\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falgolia%2Frecommend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falgolia%2Frecommend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falgolia%2Frecommend/lists"}