useFeature Type Narrowing

useFeature has the following return values:

• If the feature is off it will return "OFF".
  
• If the request is loading it will returned undefined.
  
• If the feature is loaded, it will return the feature.
  

Typescript will automatically narrow the return type once you test against "OFF". Some examples below.

export function Card() {
  const card = useFeature(qb().getSneakerCard());

  // TEST FOR "OFF"
  if (card == "OFF") return <></>;

  return (
      <div>
        // If you don't test for "OFF" above, you'll get the following error here:
        // Property 'headline' does not exist on type '"OFF" | Feature<"SneakerCard">'.
        //   Property 'headline' does not exist on type '"OFF"'
        <div>{card?.headline}</div>

  // ...

export function Footer() {

  const newsletterSignup = useFeature(
    qb().getNewsletterSignup()
  );

  // ...
  return (
    <div>
      // TEST FOR "OFF"
      {newsletterSignup && newsletterSignup != "OFF" && (
        <h3>
          {newsletterSignup.headline}
  // ...
}

export function Footer() {

  const newsletterSignup = useFeature(
    qb().getNewsletterSignup()
  );

  function handleNewsletterSignup() {
    // TEST FOR "OFF"
    if (newsletterSignup == "OFF") return;
    setDidNewsletterSignup(true);
    newsletterSignup?.signalNewsletterSignupClicked();
  }

  // ...

  <button
   type="submit"
   onClick={handleNewsletterSignup}
  </button>

  // ...