{"id":27407226,"url":"https://github.com/launchdarkly/gatsby-plugin-launchdarkly","last_synced_at":"2025-07-07T00:38:54.336Z","repository":{"id":41970192,"uuid":"239825539","full_name":"launchdarkly/gatsby-plugin-launchdarkly","owner":"launchdarkly","description":"A Gatsby plugin that makes it easy to add feature flags to your Gatsby site","archived":false,"fork":false,"pushed_at":"2025-06-06T13:51:07.000Z","size":4387,"stargazers_count":10,"open_issues_count":10,"forks_count":6,"subscribers_count":41,"default_branch":"main","last_synced_at":"2025-07-02T22:48:46.221Z","etag":null,"topics":["feature-flags","feature-toggles","gatsby","gatsby-plugin","gatsbyjs","launchdarkly","launchdarkly-sdk","managed-by-terraform"],"latest_commit_sha":null,"homepage":"https://www.gatsbyjs.org/packages/gatsby-plugin-launchdarkly/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/launchdarkly.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-02-11T17:42:55.000Z","updated_at":"2025-06-06T13:51:08.000Z","dependencies_parsed_at":"2024-08-16T11:59:52.741Z","dependency_job_id":"6115514d-d97c-436c-b01d-26a00b0c2006","html_url":"https://github.com/launchdarkly/gatsby-plugin-launchdarkly","commit_stats":{"total_commits":66,"total_committers":16,"mean_commits":4.125,"dds":0.6818181818181819,"last_synced_commit":"73eadee8154a83e45608f7c4f04e6a07c219082e"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/launchdarkly/gatsby-plugin-launchdarkly","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/launchdarkly%2Fgatsby-plugin-launchdarkly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/launchdarkly%2Fgatsby-plugin-launchdarkly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/launchdarkly%2Fgatsby-plugin-launchdarkly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/launchdarkly%2Fgatsby-plugin-launchdarkly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/launchdarkly","download_url":"https://codeload.github.com/launchdarkly/gatsby-plugin-launchdarkly/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/launchdarkly%2Fgatsby-plugin-launchdarkly/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263995293,"owners_count":23541361,"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":["feature-flags","feature-toggles","gatsby","gatsby-plugin","gatsbyjs","launchdarkly","launchdarkly-sdk","managed-by-terraform"],"created_at":"2025-04-14T07:11:06.211Z","updated_at":"2025-07-07T00:38:54.315Z","avatar_url":"https://github.com/launchdarkly.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gatsby-plugin-launchdarkly\n\nA simple plugin that integrates [LaunchDarkly](https://launchdarkly.com) into\nyour Gatsby site. This will allow you to use feature flags to rollout new\nfeatures on your site.\n\n## Installation\n\nAdd plugin to your Gatsby site:\n\n```bash\nnpm install gatsby-plugin-launchdarkly\n```\n\nThen in your `gatsby-config.js`:\n\n```js\n// gatsby-config.js\n...\n  plugins: [\n    ...\n    {\n      resolve: 'gatsby-plugin-launchdarkly',\n      options: {\n        clientSideID: '\u003cyour-launchdarkly-project-client-side-id\u003e',\n        options: {\n          // any LaunchDarkly options you may want to implement\n          bootstrap: 'localStorage', // caches flag values in localStorage\n        },\n      },\n    },\n    ...\n  ]\n...\n```\n\nThis plugin uses [LaunchDarkly's React\nSDK](https://docs.launchdarkly.com/sdk/client-side/react/react-web). The SDK requires a\n**client-side ID** which you can retrieve from your [LaunchDarkly Project\nsettings page](https://app.launchdarkly.com/settings/projects). This\n**client-side ID** needs to be stored in your\n[gatsby-config.js](https://www.gatsbyjs.org/docs/api-files-gatsby-config/).\n\nBehind the scenes, this plugin uses the React SDK's `withLDProvider` function to initialize the client. Read the documentation on [`Initializing the React SDK`](https://docs.launchdarkly.com/sdk/client-side/react/react-web#initializing-the-react-sdk) to understand other configuration options you can provide.\n\nTo learn more about the configuration options available in the plugin's `options` property, read the documentation on [configuration in the JavaScript SDK](https://docs.launchdarkly.com/sdk/features/config#javascript).\n\n## Basic usage\n\nTo use a LaunchDarkly feature flag in your component, first import the `LaunchDarklyContext`. This plugin uses [React Context](https://reactjs.org/docs/context.html) to make the LaunchDarkly SDK\navailable to your Gatbsy components.\n\n```js\nimport { useFlags } from 'gatsby-plugin-launchdarkly'\n```\n\nThen within your component, you can do the following:\n\n```jsx\n// In a functional component...\nconst Header = ({ siteTitle }) =\u003e {\n  // The following contains all of the client-side flags. Flag names are\n  // automatically converted to snake-case which will allow you to pull out\n  // one or more flags directly through destructuring.\n  const flags = useFlags()\n\n  return (\n    \u003cheader\n      style={{\n        background: flags.someNewFeature ? 'green' : 'gray'\n      }}\n    \u003e\n...\n```\n\n*Note that the LaunchDarkly SDK will automatically convert flag names to\nsnake-case.*\n\nIn addition to the `useFlags` hook, the [`useLDClient`](https://docs.launchdarkly.com/sdk/client-side/react/react-web#hooks) hook gives you direct access to the LaunchDarkly client:\n\n```jsx\nimport React from 'react';\nimport { useFlags, useLDClient } from 'gatsby-plugin-launchdarkly';\n\nconst HooksDemo = () =\u003e {\n  const { someNewFeature } = useFlags();\n  const ldClient = useLDClient();\n\n  const onLoginSuccessful = () =\u003e ldClient.identify({ kind: 'user', key: 'user-key-123abc' });\n\n  return (\n    \u003cdiv\u003e{someNewFeature ? 'Flag on' : 'Flag off'}\u003c/div\u003e\n  );\n};\n\nexport default HooksDemo;\n```\n\nIf you're using class components, you can use the `withLDConsumer` higher-order\ncomponent to do this instead:\n\n```jsx\nimport { withLDConsumer } from 'gatsby-plugin-launchdarkly'\n\n// In your class component...\nclass MyComponent extends React.Component {\n  render() {\n    // Wrapping your class component with the withLDConsumer HOC injects the\n    // flags and ldClient props into your component\n    const { flags, ldClient } = this.props;\n\n    return\n      \u003cheader\n        style={{\n          background: flags.someNewFeature ? 'green' : 'gray'\n      }}\n    ...\n    \u003e\n  }\n}\n\nexport default withLDConsumer()(MyComponent)\n```\n\nThe `withLDConsumer` HOC injects the `flags` and `ldClient` as props to your\nclass component.\n\n## Advanced usage\n\nThis plugin assumes that the end user viewing your site is anonymous, which is likely the\ncase for most Gatsby sites. In this situation, the LaunchDarkly SDK uniquely\ntracks each end user and remembers what variation of each flag was served to them.\nThis is transparent and you don't need to do anything else to make it work this\nway.\n\nIf you have a logged-in end user, and can identify that end user to LaunchDarkly and then target that end user for a feature. To do this, access the `LDClient` object directly:\n\n```jsx\nimport React from 'react';\nimport { useFlags, useLDClient } from 'gatsby-plugin-launchdarkly';\n\nconst HooksDemo = () =\u003e {\n  const { someNewFeature } = useFlags();\n  const ldClient = useLDClient();\n\n  // Calling `identify` will cause the flags to be re-evaluated for the\n  // new end user that's logged in. Changes in flag values will stream in and\n  // could cause your component to re-render.\n  const onLoginSuccessful = (user) =\u003e ldClient.identify({\n    kind: 'user',\n    key: user.id,\n    firstName: user.firstName,\n    lastName: user.lastName,\n    anonymous: false,\n  });\n\n  return (\n    \u003cdiv\u003e{someNewFeature ? 'Flag on' : 'Flag off'}\u003c/div\u003e\n  );\n};\n\nexport default HooksDemo;\n```\n\nTo learn more about changing the user context, read the [`identify` documentation for the JavaScript SDK](https://docs.launchdarkly.com/sdk/features/identify#javascript).\n\n## Contributing\n\nWe encourage pull requests and other contributions from the community. Check out our [contributing guidelines](CONTRIBUTING.md) for instructions on how to contribute to this plugin.\n\n## About LaunchDarkly\n\n* LaunchDarkly is a continuous delivery platform that provides feature flags as a service and allows developers to iterate quickly and safely. We allow you to easily flag your features and manage them from the LaunchDarkly dashboard.  With LaunchDarkly, you can:\n    * Roll out a new feature to a subset of your users (like a group of users who opt-in to a beta tester group), gathering feedback and bug reports from real-world use cases.\n    * Gradually roll out a feature to an increasing percentage of users, and track the effect that the feature has on key metrics (for instance, how likely is a user to complete a purchase if they have feature A versus feature B?).\n    * Turn off a feature that you realize is causing performance problems in production, without needing to re-deploy, or even restart the application with a changed configuration file.\n    * Grant access to certain features based on user attributes, like payment plan (eg: users on the ‘gold’ plan get access to more features than users in the ‘silver’ plan). Disable parts of your application to facilitate maintenance, without taking everything offline.\n* LaunchDarkly provides feature flag SDKs for a wide variety of languages and technologies. Read [our documentation](https://docs.launchdarkly.com/sdk) for a complete list.\n* Explore LaunchDarkly\n    * [launchdarkly.com](https://www.launchdarkly.com/ \"LaunchDarkly Main Website\") for more information\n    * [docs.launchdarkly.com](https://docs.launchdarkly.com/  \"LaunchDarkly Documentation\") for our documentation and SDK reference guides\n    * [apidocs.launchdarkly.com](https://apidocs.launchdarkly.com/  \"LaunchDarkly API Documentation\") for our API documentation\n    * [blog.launchdarkly.com](https://blog.launchdarkly.com/  \"LaunchDarkly Blog Documentation\") for the latest product updates\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaunchdarkly%2Fgatsby-plugin-launchdarkly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaunchdarkly%2Fgatsby-plugin-launchdarkly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaunchdarkly%2Fgatsby-plugin-launchdarkly/lists"}