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/master/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} />