Repository files navigation

eBayUI React components

Demo

• Node.js (v20.12.2)
• React (v18+, v16.8+ in maintenance mode)
• eBay Skin (v18+)

• ebay-3d-viewer
• ebay-alert-dialog
• ebay-area-chart
• ebay-avatar
• ebay-confirm-dialog
• ebay-badge
• ebay-bar-chart
• ebay-breadcrumbs
• ebay-button
• ebay-calendar
• ebay-character-count
• ebay-carousel
• ebay-chart-legend
• ebay-checkbox
• ebay-chip
• ebay-chips-combobox
• ebay-combobox
• ebay-confirm-dialog
• ebay-cta-button
• ebay-date-textbox
• ebay-details
• ebay-donut-chart
• ebay-education-notice
• ebay-eek
• ebay-fake-link
• ebay-fake-menu
• ebay-fake-menu-button
• ebay-fake-tabs
• ebay-field
• ebay-filter
• ebay-filter-menu
• ebay-filter-menu-button
• ebay-flag
• ebay-icon-button
• ebay-icon
• ebay-image-placeholder
• ebay-infotip
• ebay-inline-notice
• ebay-lightbox-dialog
• ebay-line-chart
• ebay-listbox-button
• ebay-listbox
• ebay-menu
• ebay-menu-button
• ebay-page-notice
• ebay-pagination
• ebay-panel-dialog
• ebay-phone-input
• ebay-progress-bar
• ebay-progress-bar-expressive
• ebay-progress-spinner
• ebay-progress-stepper
• ebay-radio
• ebay-section-title
• ebay-section-notice
• ebay-segmented-buttons
• ebay-select
• ebay-signal
• ebay-skeleton
• ebay-snackbar-dialog
• ebay-spark-line
• ebay-split-button
• ebay-star-rating
• ebay-star-rating-select
• ebay-switch
• ebay-tabs
• ebay-textbox
• ebay-toast-dialog
• ebay-toggle-button
• ebay-toggle-button-group
• ebay-tooltip
• ebay-tourtip
• ebay-tri-state-checkbox
• ebay-video

These react components are available as@ebay/ui-core-react package onNPM.

Use npm or yarn to add the package dependency to your project:

yarn add @ebay/ui-core-react @ebay/skin

import{EbayTextbox}from'@ebay/ui-core-react/ebay-textbox'import{EbayButton}from'@ebay/ui-core-react/ebay-button'<EbayTextboxplaceholder="Enter text here"/><EbayButton>Submit</EbayButton>

If you render children components dynamically and don't want to get Reactkey warnings then provide akey:

<EbayParentComponent>{items.map((item,index)=><EbayChildComponentkey={index}>{item}</EbayChildComponent>)}</EbayParentComponent>

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:

<EbayButtonid="my-button"/>

Create an issue on github

@ebay/ui-core-react

@ebay/ebayui-core-react (obsolete)

ebayui-core-react (obsolete)