# <ComponentSelector /> Component

## Description

Shows a (filtered) list of the current components on the page

## Checklist

This component should...

- Should render the component in the dom
- Should render a list of components extracted from the content of the page
- Should filter out any items from the list of editor items based on the filterOut prop that matches the [key, value] pattern (e.g. ['type', 'Body'])
- Should only show a list of editor items that match what's in the filterOnly prop where the filter matches the [key, value] pattern (e.g. ['canHaveChildren', true])
- Should show a placeholder in the dropdown menu that matches the provided label prop
- Should highlight the actual page object when mouse hovers over the item
- Should render an icon next to each item in the list
- Should trigger the onChange() event when an item is clicked
- Should trigger the `onComponentSelectorMenuList` plugin hook when the list to show is being generated
- Should trigger the `onComponentSelected` plugin hook when an item is selected
- Should trigger the `onComponentSelectorRender` the ComponentSelector is rendering

## Usage

To install it...

> npm install @sandcastle/components

Add it to your project...

```
import * as React from 'react'
import * as ComponentSelector from '@sandcastle/components/ComponentSelector`

export default () => (
  <ComponentSelector

  />
)
```

## Best Practices

To do: Add any Best Practices here

## Lifecycle Hooks

To do: Add any Lifecycle Hooks here

## Related Components

To do: Add any Related Components here