grafana/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.mdx

import { Meta, Props } from '@storybook/addon-docs/blocks';
import { DataSourceHttpSettings } from './DataSourceHttpSettings';

<Meta title="MDX|DataSourceHttpSettings" component={DataSourceHttpSettings} />

# DataSourceHttpSettings

Component for displaying the configuration options for a data source plugin.

### When to use

It is used in a `ConfigEditor` for data source plugins. You can find more examples in our core data source
plugins [here](https://github.com/grafana/grafana/tree/main/public/app/plugins/datasource).

### Example usage

```jsx
export const ConfigEditor = (props: Props) => {
  const { options, onOptionsChange } = props;
  return (
    <>
      <DataSourceHttpSettings
        defaultUrl="http://localhost:9090"
        dataSourceConfig={options}
        showAccessOptions={true}
        onChange={onOptionsChange}
        sigV4AuthEnabled={false}
      />

      {/* Additional configuration settings for your data source plugin.*/}
    </>
  );
};
```

<Props of={DataSourceHttpSettings} />