npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gatsby-plugin-launchdarkly

v1.0.0

Published

A simple plugin that integrates LaunchDarkly into your Gatsby site. This will allow you to use feature flags to rollout new features on your site.

Downloads

9,287

Readme

gatsby-plugin-launchdarkly

A simple plugin that integrates LaunchDarkly into your Gatsby site. This will allow you to use feature flags to rollout new features on your site.

Installation

Add plugin to your Gatsby site:

npm install gatsby-plugin-launchdarkly

Then in your gatsby-config.js:

// gatsby-config.js
...
  plugins: [
    ...
    {
      resolve: 'gatsby-plugin-launchdarkly',
      options: {
        clientSideID: '<your-launchdarkly-project-client-side-id>',
        options: {
          // any LaunchDarkly options you may want to implement
          bootstrap: 'localStorage', // caches flag values in localStorage
        },
      },
    },
    ...
  ]
...

This plugin uses LaunchDarkly's React SDK. The SDK requires a client-side ID which you can retrieve from your LaunchDarkly Project settings page. This client-side ID needs to be stored in your gatsby-config.js.

Behind the scenes, this plugin uses the React SDK's withLDProvider function to initialize the client. Read the documentation on Initializing the React SDK to understand other configuration options you can provide.

To learn more about the configuration options available in the plugin's options property, read the documentation on configuration in the JavaScript SDK.

Basic usage

To use a LaunchDarkly feature flag in your component, first import the LaunchDarklyContext. This plugin uses React Context to make the LaunchDarkly SDK available to your Gatbsy components.

import { useFlags } from 'gatsby-plugin-launchdarkly'

Then within your component, you can do the following:

// In a functional component...
const Header = ({ siteTitle }) => {
  // The following contains all of the client-side flags. Flag names are
  // automatically converted to snake-case which will allow you to pull out
  // one or more flags directly through destructuring.
  const flags = useFlags()

  return (
    <header
      style={{
        background: flags.someNewFeature ? 'green' : 'gray'
      }}
    >
...

Note that the LaunchDarkly SDK will automatically convert flag names to snake-case.

In addition to the useFlags hook, the useLDClient hook gives you direct access to the LaunchDarkly client:

import React from 'react';
import { useFlags, useLDClient } from 'gatsby-plugin-launchdarkly';

const HooksDemo = () => {
  const { someNewFeature } = useFlags();
  const ldClient = useLDClient();

  const onLoginSuccessful = () => ldClient.identify({ kind: 'user', key: 'user-key-123abc' });

  return (
    <div>{someNewFeature ? 'Flag on' : 'Flag off'}</div>
  );
};

export default HooksDemo;

If you're using class components, you can use the withLDConsumer higher-order component to do this instead:

import { withLDConsumer } from 'gatsby-plugin-launchdarkly'

// In your class component...
class MyComponent extends React.Component {
  render() {
    // Wrapping your class component with the withLDConsumer HOC injects the
    // flags and ldClient props into your component
    const { flags, ldClient } = this.props;

    return
      <header
        style={{
          background: flags.someNewFeature ? 'green' : 'gray'
      }}
    ...
    >
  }
}

export default withLDConsumer()(MyComponent)

The withLDConsumer HOC injects the flags and ldClient as props to your class component.

Advanced usage

This plugin assumes that the end user viewing your site is anonymous, which is likely the case for most Gatsby sites. In this situation, the LaunchDarkly SDK uniquely tracks each end user and remembers what variation of each flag was served to them. This is transparent and you don't need to do anything else to make it work this way.

If 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:

import React from 'react';
import { useFlags, useLDClient } from 'gatsby-plugin-launchdarkly';

const HooksDemo = () => {
  const { someNewFeature } = useFlags();
  const ldClient = useLDClient();

  // Calling `identify` will cause the flags to be re-evaluated for the
  // new end user that's logged in. Changes in flag values will stream in and
  // could cause your component to re-render.
  const onLoginSuccessful = (user) => ldClient.identify({
    kind: 'user',
    key: user.id,
    firstName: user.firstName,
    lastName: user.lastName,
    anonymous: false,
  });

  return (
    <div>{someNewFeature ? 'Flag on' : 'Flag off'}</div>
  );
};

export default HooksDemo;

To learn more about changing the user context, read the identify documentation for the JavaScript SDK.

Contributing

We encourage pull requests and other contributions from the community. Check out our contributing guidelines for instructions on how to contribute to this plugin.

About LaunchDarkly

  • 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:
    • 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.
    • 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?).
    • 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.
    • 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.
  • LaunchDarkly provides feature flag SDKs for a wide variety of languages and technologies. Read our documentation for a complete list.
  • Explore LaunchDarkly