{"id":25042437,"url":"https://github.com/michael-sulyak/react-split-testing","last_synced_at":"2025-04-14T01:22:12.572Z","repository":{"id":33287114,"uuid":"156995028","full_name":"michael-sulyak/react-split-testing","owner":"michael-sulyak","description":"Simple A/B testing component for React","archived":false,"fork":false,"pushed_at":"2023-01-03T17:38:30.000Z","size":2921,"stargazers_count":71,"open_issues_count":33,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T15:21:23.858Z","etag":null,"topics":["ab-testing","react","ssr"],"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/michael-sulyak.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":"2018-11-10T15:40:30.000Z","updated_at":"2024-09-18T11:08:38.000Z","dependencies_parsed_at":"2023-01-15T00:30:47.507Z","dependency_job_id":null,"html_url":"https://github.com/michael-sulyak/react-split-testing","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael-sulyak%2Freact-split-testing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael-sulyak%2Freact-split-testing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael-sulyak%2Freact-split-testing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael-sulyak%2Freact-split-testing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michael-sulyak","download_url":"https://codeload.github.com/michael-sulyak/react-split-testing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248805443,"owners_count":21164332,"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":["ab-testing","react","ssr"],"created_at":"2025-02-06T04:46:15.852Z","updated_at":"2025-04-14T01:22:12.528Z","avatar_url":"https://github.com/michael-sulyak.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-split-testing\n\n[![NPM](https://img.shields.io/npm/v/react-split-testing.svg?style=flat-square)](https://www.npmjs.com/package/react-split-testing)  [![Scrutinizer Code Quality](https://img.shields.io/scrutinizer/g/expert-m/react-split-testing.svg?style=flat-square)](https://scrutinizer-ci.com/g/expert-m/react-split-testing/?branch=master)  [![Build Status](https://img.shields.io/scrutinizer/build/g/expert-m/react-split-testing.svg?style=flat-square)](https://scrutinizer-ci.com/g/expert-m/react-split-testing/build-status/master)  [![GitHub Issues](https://img.shields.io/github/issues/expert-m/react-split-testing.svg?style=flat-square)](https://github.com/expert-m/react-split-testing/issues)  [![Gitter](https://img.shields.io/badge/gitter-join_chat-blue.svg?style=flat-square)](https://gitter.im/expert_m/react-split-testing)  [![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://opensource.org/licenses/MIT)\n\n\u003e A/B testing, also called split testing, is an experiment where two (or more) variants of a webpage are shown to users at random, and is used as a means of determining which variant leads to a better performance. Once a variant wins, it is then shown to all users.\n\nWrap components in [`\u003cVariant /\u003e`](#variant-) and nest in [`\u003cExperiment /\u003e`](#experiment-). A variant is chosen randomly and saved to local storage.\n\n```js\n\u003cExperiment name=\"My Example\"\u003e\n  \u003cVariant name=\"A\"\u003e\n    \u003cdiv\u003eVersion A\u003c/div\u003e\n  \u003c/Variant\u003e\n  \u003cVariant name=\"B\"\u003e\n    \u003cdiv\u003eVersion B\u003c/div\u003e\n  \u003c/Variant\u003e\n\u003c/Experiment\u003e\n```\n\n#### [Example](https://github.com/expert-m/react-split-testing/tree/master/examples/simple) ([Demo](https://expert-m.github.io/react-split-testing/))\n\n## Table Of Contents\n- [Installation](#installation)\n    - [npm](#npm)\n    - [yarn](#yarn)\n- [Usage](#usage)\n- [Server Rendering](#server-rendering)\n- [API Reference](#api-reference)\n  - [`\u003cExperiment /\u003e`](#experiment-)\n  - [`\u003cVariant /\u003e`](#variant-)\n- [License](#license)\n\n## Installation\n\n#### npm\n```bash\nnpm install react-split-testing\n```\n\n#### yarn\n```bash\nyarn add react-split-testing\n```\n\n## Usage\n\n```jsx\nimport { Experiment, Variant } from 'react-split-testing'\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cExperiment\n        ref=\"experiment\"\n        name=\"My experiment\"\n        onChoice={(experimentName, variantName) =\u003e console.log(experimentName, variantName)}\n      \u003e\n        \u003cVariant name=\"A\"\u003e\n          \u003cdiv\u003eSection A\u003c/div\u003e\n        \u003c/Variant\u003e\n        \u003cVariant name=\"B\"\u003e\n          \u003cdiv\u003eSection B\u003c/div\u003e\n        \u003c/Variant\u003e\n      \u003c/Experiment\u003e\n    )\n  }\n}\n```\n\n[back to top](#table-of-contents)\n\n---\n\n### Server Rendering\nA [`\u003cExperiment /\u003e`](#experiment-) with a `userIdentifier` property will choose a consistent [`\u003cVariant /\u003e`](#variant-) suitable for server side rendering.\n\n#### Example\n\n```jsx\nimport { Experiment, Variant } from 'react-split-testing'\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cExperiment name=\"My experiment\" userIdentifier={this.props.userIdentifier}\u003e\n        \u003cVariant name=\"A\"\u003e\n          \u003cdiv\u003eSection A\u003c/div\u003e\n        \u003c/Variant\u003e\n        \u003cVariant name=\"B\"\u003e\n          \u003cdiv\u003eSection B\u003c/div\u003e\n        \u003c/Variant\u003e\n      \u003c/Experiment\u003e\n    )\n  }\n}\n```\n\n[back to top](#table-of-contents)\n\n---\n\n## API Reference\n\n### `\u003cExperiment /\u003e`\n\nExperiment container component. Children must be of type [`Variant`](#variant-).\n\n* **Properties:**\n  * `name` - Name of the experiment.\n    * **Required**\n    * **Type:** `string`\n    * **Example:** `\"My Example\"`\n  * `userIdentifier` - Distinct user identifier. Useful for [server side rendering](#server-rendering).\n    * **Optional**\n    * **Type:** `string`\n    * **Example:** `\"lMMaTqA8ODe7c36hhf2N\"`\n  * `variantName` - Name of the variant. When defined, this value is used to choose a variant. This property may be useful for [server side rendering](#server-rendering).\n    * **Optional**\n    * **Type:** `string`\n    * **Example:** `\"A\"`\n  * `onChoice` - Called when a [`Variant`](#variant-) has been chosen for your [`Experiment`](#experiment-).\n    * **Optional**\n    * **Type:** `function`\n    * **Example:** `(experimentName, variantName) =\u003e { console.log(experimentName, variantName) }`\n  * `onRawChoice` - Same as `onChoice`, but the objects passed are React component instances.\n    * **Optional**\n    * **Type:** `function`\n    * **Example:** `(experiment, variant) =\u003e { console.log(experimentName.getName(), variant.props.name) }`\n\n* **Methods:**\n  * `getName()` - Returns the [`Experiment`](#experiment-) name.\n  * `getActiveVariant()` - Returns the currently displayed [`Variant`](#variant-).\n  * `getActiveVariantName()` - Returns the currently displayed [`Variant`](#variant-) name.\n  * `getVariant(variantName)` - Returns the instance of the specified [`Variant`](#variant-) name.\n\n[back to top](#table-of-contents)\n\n---\n\n### `\u003cVariant /\u003e`\n\nVariant container component.\n\n* **Properties:**\n  * `name` - Name of the variant.\n    * **Required**\n    * **Type:** `string`\n    * **Example:** `\"A\"`\n  * `weight` - The variants will be chosen according to the ratio of the numbers, for example variants `A`, `B`, `C` with weights `1`, `2`, `2` will be chosen 20%, 40%, and 40% of the time, respectively.\n    * **Optional**\n    * **Type:** `number`\n    * **Default:** `1`\n    * **Example:** `2`\n\n* **Methods:**\n  * `getName()` - Returns the [`Variant`](#variant-) name.\n  * `getWeight()` - Returns the [`Variant`](#variant-) weight.\n\n[back to top](#table-of-contents)\n\n---\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichael-sulyak%2Freact-split-testing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichael-sulyak%2Freact-split-testing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichael-sulyak%2Freact-split-testing/lists"}