") center/100% no-repeat;border-color:#000;}.b-checkbox.b-checkbox-checked[disabled]{background:#3d8feb url("data:image/svg+xml;utf8, ") center/100% no-repeat;border-color:#000;cursor:not-allowed;opacity:.3}.b-checkbox.b-checkbox-checked:focus{background:#1671d7 url("data:image/svg+xml;utf8, ") center/100% no-repeat;border-color:#000}.b-checkbox.b-checkbox-checked:hover{background:#1671d7 url("data:image/svg+xml;utf8, ") center/100% no-repeat;border-color:#000}.b-checkbox.b-checkbox-mixed{background:#3d8feb linear-gradient(to bottom, #3d8feb 0%, #3d8feb calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), #3d8feb calc(50% + 1px), #3d8feb 100%) center / 50% 50% no-repeat;border-color:#000;}.b-checkbox.b-checkbox-mixed[disabled]{background:#3d8feb linear-gradient(to bottom, #3d8feb 0%, #3d8feb calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), #3d8feb calc(50% + 1px), #3d8feb 100%) center / 50% 50% no-repeat;border-color:#000;cursor:not-allowed;opacity:.3}.b-checkbox.b-checkbox-mixed:focus{background:#1671d7 linear-gradient(to bottom, #1671d7 0%, #1671d7 calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), #1671d7 calc(50% + 1px), #1671d7 100%) center / 50% 50% no-repeat;border-color:#000}.b-checkbox.b-checkbox-mixed:hover{background:#1671d7 linear-gradient(to bottom, #1671d7 0%, #1671d7 calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), #1671d7 calc(50% + 1px), #1671d7 100%) center / 50% 50% no-repeat;border-color:#000}.b-dialog-wrapper{line-height:0;position:absolute;top:0;left:0;z-index:9999}.b-dialog{background:#fff;border:1px solid transparent;border-radius:2px;box-shadow:1px 2px 3px transparent;color:#111;line-height:1.5;padding:1.5rem;}.b-dialog *:last-child{margin-bottom:0}.b-text{white-space:nowrap}.b-image{background:#ccc;background-size:cover;background-position:center;border:0;display:inline-block;line-height:0;position:relative;height:auto;width:100%}.b-image::after,.b-image-loading::before,.b-image-error::before{content:'';display:block;padding-top:100%;width:100%}.b-image-loading::before,.b-image-error::before{position:absolute;top:0;bottom:0;left:0;right:0}.b-image-loading{background:#ccc;}.b-image-loading::before{background:#979fa8;background:url("data:image/gif;base64,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") no-repeat center}.b-image-error{background:#ccc;}.b-image-error::before{background:url("data:image/svg+xml;charset=utf8, ") no-repeat center}.b-input-wrapper{font-size:.75rem;position:relative;width:100%}.b-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:1px solid transparent;border-radius:2px;color:#c5cfdb;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:.75em;position:relative;z-index:1;width:100%;transition:all 200ms ease;}.b-input + .b-input-placeholder{background:#272b33;border-color:transparent;color:rgba(197,207,219,0.5)}.b-input[disabled]{color:#c5cfdb;cursor:not-allowed;opacity:.3;}.b-input[disabled] + .b-input-placeholder,.b-input[disabled]:active + .b-input-placeholder,.b-input[disabled]:focus + .b-input-placeholder,.b-input[disabled]:hover + .b-input-placeholder{background:#272b33;border-color:transparent}.b-input:active{color:#c5cfdb;}.b-input:active + .b-input-placeholder{background:#272b33;border-color:#3d8feb}.b-input:focus{color:#c5cfdb;}.b-input:focus + .b-input-placeholder{background:#272b33;border-color:rgba(51,51,51,0)}.b-input:hover{color:#c5cfdb;}.b-input:hover + .b-input-placeholder{background:#272b33;border-color:rgba(51,51,51,0)}.b-input-placeholder{overflow:hidden;position:absolute;top:0;left:0;bottom:0;right:0;white-space:nowrap;text-overflow:ellipsis;z-index:0}.b-modal-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:auto;position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;}.b-modal-wrapper .b-dialog-wrapper{-ms-flex-negative:0;flex-shrink:0;max-width:80vw;position:relative}.b-modal-wrapper .b-dialog{background:#fff;border:1px solid #e6e6e6;box-shadow:1px 2px 3px transparent;color:#111}.b-modal-mask{background:rgba(39,43,51,0.9);position:fixed;top:0;left:0;right:0;bottom:0}.b-pagination-control.b-segmented-control-option.b-button{background:transparent;border-color:transparent;color:#979fa8;}.b-pagination-control.b-segmented-control-option.b-button[disabled],.b-pagination-control.b-segmented-control-option.b-button[disabled]:active,.b-pagination-control.b-segmented-control-option.b-button[disabled]:focus,.b-pagination-control.b-segmented-control-option.b-button[disabled]:hover{background:transparent;border-color:transparent;color:#979fa8}.b-pagination-control.b-segmented-control-option.b-button:active{background:transparent;border-color:transparent;color:#fff}.b-pagination-control.b-segmented-control-option.b-button:focus{background:transparent;border-color:transparent;color:#cbcfd3}.b-pagination-control.b-segmented-control-option.b-button:hover{background:transparent;border-color:transparent;color:#cbcfd3}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected{background:transparent;border-color:transparent;color:#fff;}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled],.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled]:active,.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled]:focus,.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled]:hover{background:transparent;border-color:transparent;color:#fff}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected:active{background:transparent;border-color:transparent;color:#fff}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected:focus{background:transparent;border-color:transparent;color:#fff}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected:hover{background:transparent;border-color:transparent;color:#fff}.b-popover{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;}.b-popover .b-dialog{background:#272b33;border:1px solid #000;box-shadow:1px 2px 3px transparent;color:#c5cfdb}.b-popover-caret{position:relative;-webkit-transform-origin:center;transform-origin:center;height:16px;width:16px}.b-popover-caret-border{fill:#3d8feb}.b-popover-caret-fill{fill:#3d8feb}.b-popover-anchor-y-start.b-popover-self-y-end .b-popover-caret{margin-top:-3px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.b-popover-anchor-y-end.b-popover-self-y-start .b-popover-caret{margin-bottom:-3px}.b-popover-anchor-x-start.b-popover-self-x-end{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;}.b-popover-anchor-x-start.b-popover-self-x-end .b-popover-caret{margin-left:-3px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.b-popover-anchor-x-end.b-popover-self-x-start{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;}.b-popover-anchor-x-end.b-popover-self-x-start .b-popover-caret{margin-right:-3px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.b-progress-wrapper{border:1px solid #3d8feb;border-radius:2px;overflow:hidden;position:relative;height:30px;width:100%}.b-progress-wrapper[data-progress]::before{color:#fff;content:attr(data-progress);line-height:30px;padding-left:10px;position:relative;text-align:left;z-index:1}.b-progress{background:#3d8feb;position:absolute;top:0;left:0;bottom:0}.b-progress-indeterminate{background:#3d8feb;border-color:#3d8feb;top:0;left:0;bottom:0;right:0;-webkit-animation:interdeterminate-progress-bar 2.5s ease-in-out alternate infinite;animation:interdeterminate-progress-bar 2.5s ease-in-out alternate infinite;}.b-progress-indeterminate ~ .b-progress-label{color:#fff}@-webkit-keyframes interdeterminate-progress-bar{from{opacity:0}to{opacity:1}}@keyframes interdeterminate-progress-bar{from{opacity:0}to{opacity:1}}.b-disclosure-toggle{color:#c5cfdb;cursor:pointer;display:inline-block;font-size:.75rem;padding-left:15px;position:relative;}.b-disclosure-toggle::before{content:'';border-width:5px;border-color:transparent;border-left-color:#c5cfdb;border-style:solid;position:absolute;margin-top:-5px;top:50%;left:4px}.b-disclosure-expanded{color:#c5cfdb;}.b-disclosure-expanded > .b-disclosure-toggle::before{border-top-color:#c5cfdb;border-left-color:transparent;margin-top:-3px;left:0}.b-disclosure-content{margin-top:.5rem;width:100%}.b-radio-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.b-radio,.b-radio-label{cursor:pointer}.b-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:radial-gradient(circle at center,transparent 0%,transparent calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border:1px solid #c5cfdb;border-radius:50%;-ms-flex-negative:0;flex-shrink:0;margin:1px 3px 0;padding:0;height:16px;width:16px;transition:all 200ms ease;}.b-radio[disabled],.b-radio[disabled]:active,.b-radio[disabled]:focus,.b-radio[disabled]:hover{background:radial-gradient(circle at center,transparent 0%,transparent calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#c5cfdb;cursor:not-allowed;opacity:.3}.b-radio:active{background:radial-gradient(circle at center,#3d8feb 0%,#3d8feb calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#3d8feb}.b-radio:focus{background:radial-gradient(circle at center,transparent 0%,transparent calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#fff}.b-radio:hover{background:radial-gradient(circle at center,transparent 0%,transparent calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#fff}.b-radio.b-radio-selected,.b-radio.b-radio-selected:hover,.b-radio.b-radio-selected:focus,.b-radio.b-radio-selected:active{background:radial-gradient(circle at center,#3d8feb 0%,#3d8feb calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#3d8feb}.b-radio-label{line-height:1.2;margin-left:.25em}.b-segmented-control{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.b-segmented-control-option.b-button{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;background:#535a66;border:1px solid transparent;border-radius:0;color:#fff;cursor:pointer;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:14px;margin:0;padding:.5em .75em;text-align:center;white-space:nowrap;transition:all 200ms ease;}.b-segmented-control-option.b-button:first-of-type{border-top-left-radius:2px;border-bottom-left-radius:2px}.b-segmented-control-option.b-button:last-of-type{border-top-right-radius:2px;border-bottom-right-radius:2px}.b-segmented-control-option.b-button:not(:first-of-type){margin-left:-1px}.b-segmented-control-option.b-button[disabled],.b-segmented-control-option.b-button[disabled]:active,.b-segmented-control-option.b-button[disabled]:focus,.b-segmented-control-option.b-button[disabled]:hover,.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled]{background:#282d33;border-color:transparent;color:#fff;opacity:.3}.b-segmented-control-option.b-button:focus{background:#666d7a;border-color:transparent;color:#fff}.b-segmented-control-option.b-button:hover{background:#666d7a;border-color:transparent;color:#fff}.b-segmented-control-option.b-button:active,.b-segmented-control-option.b-button.b-segmented-control-option-selected,.b-segmented-control-option.b-button.b-segmented-control-option-selected:focus,.b-segmented-control-option.b-button.b-segmented-control-option-selected:hover{background:#282d33;border-color:transparent;color:#fff}.b-segmented-control-option.b-button.b-segmented-control-option-selected{z-index:1}.b-tokenfield-wrapper{background:#272b33;border:1px solid transparent;border-radius:2px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.75rem;}.b-tokenfield-wrapper .b-typeahead-wrapper{background:transparent;border:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input{color:#c5cfdb;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input + .b-input-placeholder{background:transparent;border-color:transparent;color:rgba(197,207,219,0.5)}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled]{color:#c5cfdb;opacity:.3;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled] + .b-input-placeholder,.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled]:active + .b-input-placeholder,.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled]:focus + .b-input-placeholder,.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled]:hover + .b-input-placeholder{background:transparent;border-color:transparent}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:active{color:#c5cfdb;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:active + .b-input-placeholder{background:transparent;border-color:transparent}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:focus{color:#c5cfdb;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:focus + .b-input-placeholder{background:transparent;border-color:transparent}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:hover{color:#c5cfdb;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:hover + .b-input-placeholder{background:transparent;border-color:transparent}.b-tokenfield-wrapper .b-typeahead,.b-tokenfield-wrapper .b-typeahead-hint{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding:10px}.b-tokenfield{display:-webkit-box;display:-ms-flexbox;display:flex}.b-tokenfield-tokens{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;margin:5px 0 5px 5px;}.b-tokenfield-tokens:empty{margin:0}.b-tokenfield-token{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;background:transparent;border:1px solid #4b5363;border-radius:2px;color:#c5cfdb;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;line-height:1;margin-right:5px;padding:5px 10px;white-space:nowrap;transition:all 200ms ease-in-out;}.b-tokenfield-token:focus{background:transparent;border-color:rgba(51,51,51,0);color:#c5cfdb;}.b-tokenfield-token:focus .b-tokenfield-token-close{color:#c5cfdb}.b-tokenfield-token:hover{background:transparent;border-color:rgba(51,51,51,0);color:#c5cfdb;}.b-tokenfield-token:hover .b-tokenfield-token-close{color:#c5cfdb}.b-tokenfield-token:active{background:transparent;border-color:#3d8feb;color:#c5cfdb}.b-tokenfield-token:last-child{margin-right:0}.b-tokenfield-token.b-tokenfield-token-selected{background:#3d8feb;border-color:#4b5363;color:#fff;}.b-tokenfield-token.b-tokenfield-token-selected .b-tokenfield-token-close{color:rgba(255,255,255,0.5)}.b-tokenfield-token.b-tokenfield-token-selected:focus{background:#3d8feb;border-color:#4b5363;color:#fff;}.b-tokenfield-token.b-tokenfield-token-selected:focus .b-tokenfield-token-close{color:#fff}.b-tokenfield-token.b-tokenfield-token-selected:hover{background:#3d8feb;border-color:#4b5363;color:#fff;}.b-tokenfield-token.b-tokenfield-token-selected:hover .b-tokenfield-token-close{color:#fff}.b-tokenfield-token-close{color:rgba(197,207,219,0.5);cursor:pointer;display:inline-block;font-size:.85em;margin-left:.5rem;transition:all 200ms ease-in-out}.b-typeahead-wrapper{background:#272b33;border:1px solid transparent;font-size:.75rem;position:relative;}.b-typeahead-wrapper .b-input{color:#c5cfdb;}.b-typeahead-wrapper .b-input + .b-input-placeholder{background:transparent;border-color:transparent;color:rgba(197,207,219,0.5)}.b-typeahead-wrapper .b-input[disabled]{color:#c5cfdb;opacity:.3;}.b-typeahead-wrapper .b-input[disabled] + .b-input-placeholder,.b-typeahead-wrapper .b-input[disabled]:active + .b-input-placeholder,.b-typeahead-wrapper .b-input[disabled]:focus + .b-input-placeholder,.b-typeahead-wrapper .b-input[disabled]:hover + .b-input-placeholder{background:transparent;border-color:transparent}.b-typeahead-wrapper .b-input:active{color:#c5cfdb;}.b-typeahead-wrapper .b-input:active + .b-input-placeholder{background:transparent;border-color:transparent}.b-typeahead-wrapper .b-input:focus{color:#c5cfdb;}.b-typeahead-wrapper .b-input:focus + .b-input-placeholder{background:transparent;border-color:transparent}.b-typeahead-wrapper .b-input:hover{color:#c5cfdb;}.b-typeahead-wrapper .b-input:hover + .b-input-placeholder{background:transparent;border-color:transparent}.b-typeahead-match-wrapper{background:#272b33;border-bottom-left-radius:2px;border-bottom-right-radius:2px;border:1px solid #000;margin-top:-1px;max-height:300px;overflow:hidden;overflow-y:auto;position:absolute;left:0;right:0;top:100%;z-index:99}.b-typeahead-match-highlight{background:#272b33;color:#fff}.b-typeahead-match{background:#272b33;color:#b3b3b3;cursor:pointer;font-size:13px;line-height:1;padding:.25em .5em;}.b-typeahead-match:focus{background:#272b33;color:#b3b3b3;}.b-typeahead-match:focus .b-typeahead-match-highlight{background:#272b33;color:#fff}.b-typeahead-match:hover{background:#1f2229;color:#b3b3b3;}.b-typeahead-match:hover .b-typeahead-match-highlight{background:#1f2229;color:#fff}.b-typeahead-match.b-typeahead-match-selected,.b-typeahead-match.b-typeahead-match-selected:focus,.b-typeahead-match.b-typeahead-match-selected:hover{background:#3d8feb;color:#ccc;}.b-typeahead-match.b-typeahead-match-selected .b-typeahead-match-highlight,.b-typeahead-match.b-typeahead-match-selected:focus .b-typeahead-match-highlight,.b-typeahead-match.b-typeahead-match-selected:hover .b-typeahead-match-highlight{background:#3d8feb;color:#fff}.demo-loose-list > *:not(:last-child)::after{content:', '}.tall-button{height:50px}.checkbox-group-demo{-webkit-columns:3;-moz-columns:3;columns:3}@media all and (max-width:600px){.checkbox-group-demo{-webkit-columns:2;-moz-columns:2;columns:2}}.b-checkbox:focus{outline:0}.dialog-demo-close-button{background:none !important;border:0;color:#ccc;cursor:pointer;line-height:1;padding:.5rem;position:absolute;top:0;right:0;transition:color 200ms ease;}.dialog-demo-close-button:hover,.dialog-demo-close-button:focus{color:#555}.dialog-demo-close-button:active{color:#c5cfdb}.dialog-demo-close-button::before{content:'X'}.demo-image figure:not(:first-child){margin-left:5px}.demo-image figure:not(:last-child){margin-right:5px}.demo-modal h3{color:inherit;margin-top:0}.demo-modal-cancel-button,.demo-modal-cancel-button:hover,.demo-modal-cancel-button:focus{background:#3d8feb;border-color:transparent;color:#fff}.demo-modal-cancel-button:hover,.demo-modal-cancel-button:focus{opacity:.8}.demo-pagination .b-segmented-control-option-selected{font-weight:700}.demo-pagination .b-pagination-item{display:-webkit-box;display:-ms-flexbox;display:flex;height:7em;margin:0;padding:1rem;}.demo-pagination .b-pagination-item + .b-pagination-item{border-top:1px solid #979fa8}.demo-pagination .b-pagination-item .card-left{-ms-flex-preferred-size:50%;flex-basis:50%}.demo-pagination .b-pagination-item .card-right{-ms-flex-preferred-size:50%;flex-basis:50%;font-size:11pt}.demo-pagination .b-pagination-item .card-left strong{font-size:18pt}@media all and (max-width:800px){.demo-pagination .b-pagination-control{padding-left:.25em;padding-right:.25em}.demo-pagination .b-pagination-control-custom{display:none}.demo-pagination .b-pagination-item{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:auto}}.demo-popover .b-dialog{outline:0}.demo-popover .b-dialog-body{padding:0}.demo-popover.b-popover-anchor-y-start.b-popover-self-y-end .b-dialog{border-bottom:3px solid #3d8feb}.demo-popover.b-popover-anchor-y-end.b-popover-self-y-start .b-dialog{border-top:3px solid #3d8feb}.demo-popover.b-popover-anchor-x-start.b-popover-self-x-end .b-dialog{border-right:3px solid #3d8feb}.demo-popover.b-popover-anchor-x-end.b-popover-self-x-start .b-dialog{border-left:3px solid #3d8feb}@media (max-width:600px){.demo-popover{max-width:75vw}}.progress-demo > *{-ms-flex-item-align:start;align-self:flex-start;margin:0 1em}.progress-demo > :first-child{margin-left:0}.progress-demo > :last-child{margin-right:0}#progress-meter .b-progress{position:absolute;right:0;left:0;bottom:0;top:auto}#progress-meter[data-progress]::before{text-align:center;position:absolute;left:0;right:0;z-index:1}
View Source ArrowKeyNavigation A higher-order component for arrow key navigation on a grouping of children.
ArrowKeyNavigation is designed not to care about the component types it is wrapping. Due to this, you can pass
whatever HTML tag you like into props.component
or even a React component you've made elsewhere. Additional props
passed to <ArrowKeyNavigation ...>
will be forwarded on to the component or HTML tag name you've supplied.
The children, similarly, can be any type of component.
Installation# npm i --save boundless-arrow-key-navigation
ArrowKeyNavigation can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:
npm i boundless --save
the ES6 import
statement then becomes like:
import { ArrowKeyNavigation } from 'boundless' ;
Demo Horizontal-only lorem ipsum dolor
Both directions lorem ipsum dolor Second child active by default Ignored child (horizontal rule)
Props# Required Props# There are no required props.
Optional Props# Name Implementation Description *
Expects any
any React-supported attribute
component
Expects string or function
Default Value 'div'
Any valid HTML tag name or a React component factory, anything that can be passed as the first argument to
React.createElement
defaultActiveChildIndex
Expects number
Default Value 0
Allows for a particular child to be initially reachable via tabbing; only applied during first render
mode
Expects ArrowKeyNavigation.mode.BOTH or
ArrowKeyNavigation.mode.HORIZONTAL or
ArrowKeyNavigation.mode.VERTICAL
Default Value ArrowKeyNavigation. mode. BOTH
controls which arrow key events are captured to move active focus within the list:
Mode Keys ArrowKeyNavigation.mode.BOTH
⬅️ ➡️ ⬆️ ⬇️ ArrowKeyNavigation.mode.HORIZONTAL
⬅️ ➡️ ArrowKeyNavigation.mode.VERTICAL
⬆️ ⬇️
Note: focus loops when arrowing past one of the boundaries; tabbing moves the user away from the list.