` element around its children in order to attach a key-down event handler.
The appearance of this wrapper element can be customized using the `className` property.
### Prop Types
| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| children | Function | ✓ | Function respondible for rendering children. This function should implement the following signature: `({ onKeyDown, onSectionRendered, scrollToColumn, scrollToRow }) => PropTypes.element` |
| className | String | | CSS class name to attach to the wrapper `
`. |
| columnsCount | Number | ✓ | Number of columns in grid; for `FlexTable` and `VirtualScroll` this property should always be `1`. |
| rowsCount | Number | ✓ | Number of rows in grid. |
### Children function
The child function is passed the following named parameters:
| Parameter | Type | Description |
|:---|:---|:---:|
| onKeyDown | Function | Key-down event handler to be attached to the DOM hierarchy. |
| onSectionRendered | Function | Pass-through callback to be attached to child component; informs the key-stepper which range of cells are currently visible. |
| scrollToColumn | Number | Specifies which column in the child component should be visible |
| scrollToRow | Number | Specifies which row in the child component should be visible |
### Examples
You can decorate any virtualized component (eg. `FlexTable`, `Grid`, or `VirtualScroll`) with arrow-key snapping like so:
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { ArrowKeyStepper, Grid } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once
ReactDOM.render(
{({ onKeyDown, onSectionRendered, scrollToColumn, scrollToRow }) => (
)}
,
document.getElementById('example')
);
```