[docs] updated to reflect both useApi and FeatureFlags object

This commit is contained in:
Bilawal Hameed
2020-03-26 16:07:48 +01:00
parent 758c12101e
commit 71072da838
2 changed files with 41 additions and 6 deletions
+39 -4
View File
@@ -8,7 +8,25 @@ export type FeatureFlagsHooks = {
};
```
Then, later, if you want to check if the user has enabled them:
## Using with useApi
This is the **recommended** way of using the API. It's officially supported by Backstage. To use it, you'll first need to register the `FeatureFlags` API via `ApiRegistry` in your `apis.ts` in your App:
```tsx
import {
ApiHolder,
ApiRegistry,
featureFlagsApiRef,
FeatureFlags,
} from '@backstage/core';
const builder = ApiRegistry.builder();
builder.add(featureFlagsApiRef, FeatureFlags);
export default builder.build() as ApiHolder;
```
Then, later, you can directly use it via `useApi`:
```tsx
import React, { FC } from 'react';
@@ -17,10 +35,27 @@ import { featureFlagsApiRef, useApi } from '@backstage/core';
const ExampleButton: FC<{}> = () => {
const featureFlagsApi = useApi(featureFlagsApiRef);
const handleClick = () => featureFlagsApi.enable('enable-example-feature');
const handleClick = () => {
featureFlagsApi.enable('enable-example-feature');
};
return (
<Button variant="contained" color="primary" onClick={handleClick}>
Enable the 'enable-example-feature' feature flag
</Button>
);
};
```
## Using directly with the `FeatureFlags` object
This is **only** for backwards-compatibility support for Spotify's internal Backstage plugins. This may be deprecated in the distant future so generally we advise against using it.
```tsx
import React, { FC } from 'react';
import { Button } from '@material-ui/core';
import { FeatureFlags } from '@backstage/core';
const ExampleButton: FC<{}> = () => {
const handleClick = () => FeatureFlags.enable('enable-example-feature');
return (
<Button variant="contained" color="primary" onClick={handleClick}>