Your First Feature Flag - React Store

react_store_changes.js

//App.tsx

// @ts-nocheck

//Import
import { Event, initialize } from '@harnessio/ff-javascript-client-sdk';

//App Function
  const [featureFlags, setFeatureFlags] = useState({});

  useEffect(() => {
    const cf = initialize(
      '9f6e0602-6c45-4a50-8826-1b5a1b250453',
      {
        identifier: 'abooleanflag',
        attributes: {
          lastUpdated: Date(),
          host: window.location.href,
        },
      },
      {
        baseUrl: 'https://config.ff.harness.io/api/1.0',
        eventUrl: 'https://events.ff.harness.io/api/1.0',
      },
    );

    cf.on(Event.READY, flags => {
      setFeatureFlags(flags);
      console.log(flags);
    });

    cf.on(Event.CHANGED, flagInfo => {
      console.log(flagInfo);
      if (flagInfo.deleted) {
        setFeatureFlags(currentFeatureFlags => {
          delete currentFeatureFlags[flagInfo.flag];
          return { ...currentFeatureFlags };
        });
      } else {
        setFeatureFlags(currentFeatureFlags => ({ ...currentFeatureFlags, [flagInfo.flag]: flagInfo.value }));
      }
    });

    return () => {
      cf?.close();
    };
  }, []);

//Decision
let className = featureFlags.abooleanflag ? 'App.Left' : 'App';

//Return 
 <div className={className}>
   
//package.json
"@harnessio/ff-javascript-client-sdk": "^1.4.4",
  
//.estlintrc
"prettier/prettier": 0,
  
//App.css
.App.Left {
  text-align: left;
}

//NPM Commands
npm start
npm run build
npm install -g serve
serve -s build