Skin components build off React
npm install @ebay/ui-core-reacteBayUI React components
- Node.js (v20.12.2)
- React (v18+, v16.8+ in maintenance mode)
- eBay Skin (v18+)
- [ ] ebay-3d-viewer
- [x] ebay-accordion
- [x] ebay-alert-dialog
- [ ] ebay-area-chart
- [x] ebay-avatar
- [x] ebay-badge
- [ ] ebay-bar-chart
- [x] ebay-breadcrumbs
- [x] ebay-button
- [x] ebay-calendar
- [x] ebay-carousel
- [x] ebay-ccd
- [ ] ebay-character-count
- [ ] ebay-chart-legend
- [x] ebay-checkbox
- [x] ebay-chip
- [x] ebay-chips-combobox
- [x] ebay-combobox
- [x] ebay-confirm-dialog
- [x] ebay-cta-button
- [x] ebay-date-textbox
- [x] ebay-details
- [ ] ebay-donut-chart
- [x] ebay-education-notice
- [x] ebay-eek
- [x] ebay-fake-link
- [x] ebay-fake-menu
- [x] ebay-fake-menu-button
- [x] ebay-fake-tabs
- [x] ebay-field
- [x] ebay-file-input
- [x] ebay-file-preview-card
- [x] ebay-file-preview-card-group
- [x] ebay-filter
- [x] ebay-filter-menu
- [x] ebay-filter-menu-button
- [ ] ebay-flag
- [x] ebay-icon-button
- [x] ebay-icon
- [x] ebay-image-placeholder
- [x] ebay-infotip
- [x] ebay-inline-notice
- [x] ebay-item-tile
- [x] ebay-item-tile-group
- [x] ebay-lightbox-dialog
- [ ] ebay-line-chart
- [x] ebay-list
- [x] ebay-listbox-button
- [x] ebay-listbox
- [x] ebay-menu
- [x] ebay-menu-button
- [x] ebay-page-notice
- [x] ebay-pagination
- [x] ebay-panel-dialog
- [ ] ebay-phone-input
- [x] ebay-progress-bar
- [x] ebay-progress-bar-expressive
- [x] ebay-progress-spinner
- [x] ebay-progress-stepper
- [x] ebay-radio
- [x] ebay-section-title
- [x] ebay-section-notice
- [x] ebay-segmented-buttons
- [x] ebay-select
- [x] ebay-signal
- [x] ebay-skeleton
- [x] ebay-snackbar-dialog
- [ ] ebay-spark-line
- [x] ebay-split-button
- [x] ebay-star-rating
- [x] ebay-star-rating-select
- [x] ebay-switch
- [x] ebay-table
- [x] ebay-tabs
- [x] ebay-textbox
- [x] ebay-toast-dialog
- [x] ebay-toggle-button
- [x] ebay-toggle-button-group
- [x] ebay-tooltip
- [x] ebay-tourtip
- [x] ebay-tristatecheckbox
- [x] ebay-video
These react components are available as @ebay/ui-core-react package on NPM.
Use npm or yarn to add the package dependency to your project:
``sh`
yarn add @ebay/ui-core-react @ebay/skin
`jsx harmony
import { EbayTextbox } from '@ebay/ui-core-react/ebay-textbox'
import { EbayButton } from '@ebay/ui-core-react/ebay-button'
`
If you render children components dynamically and don't want to get React key warnings then provide a key:
`jsx harmony`
{items.map((item, index) => (
))}
HTML attributes can be used on any component, and they will be passed through to the most prominent tag of the component. The most prominent tag is usually the root or form control, but individual components will note if it varies for specific cases.
Example of usage:
`jsx`
Create an issue on github
@ebay/ui-core-react
@ebay/ebayui-core-react (obsolete)
ebayui-core-react` (obsolete)