Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ebay/ebayui-core-react

Package Overview
Dependencies
Maintainers
17
Versions
47
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ebay/ebayui-core-react

Skin components build off React

  • 10.0.17
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
13
increased by550%
Maintainers
17
Weekly downloads
 
Created
Source

ebayui-core-react

eBayUI React components

Demo

Requirements

eBayUI Components

Progress overview

Getting Started

These react components are available as @ebay/ebayui-core-react package on NPM.

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

yarn add @ebay/ebayui-core-react

for quick development/POC

import { EbayTextbox, EbayButton } from '@ebay/ebayui-core-react'

<EbayTextbox placeholder="Enter text here" />
<EbayButton>Submit</EbayButton>

for smaller bundle size

import { EbayTextbox } from '@ebay/ebayui-core-react/ebay-textbox'
import { EbayButton } from '@ebay/ebayui-core-react/ebay-button'

<EbayTextbox placeholder="Enter text here" />
<EbayButton>Submit</EbayButton>

Notes

If you render children components dynamically and don't want to get React key warnings then provide a key:

<EbayParentComponent>
    {items.map((item, index) => <EbayChildComponent key={index}>{item}</EbayChildComponent>)}
</EbayParentComponent>
IE-10/11 (deprecated)

You will need polyfills for IE. Recommended approach is using core-js with or without babel.

To manually use polyfills you need to import them:

import 'core-js/stable/object/values'

Object.values({ a: 'Hello' }).map(console.log)

But we suggest to use polyfills automatically by editing your .babelrc:

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": "3",
                "targets": {
                    "chrome": "63",
                    "safari": "12",
                    "ios": "12",
                    "edge": "18",
                    "ie": "11"
                }
            }
        ]
    ]
}

targets can also be something like "> 0.2%, not dead"

Issues

Create an issue on github

Contributing

Write an email to tmanyanov@ebay.com

How to update icons on skin changes

This will update EbaySvg and EbayIcon components:

yarn update-icons

Quick guidance for contribution:

  • Create a feature branch git checkout -b features/new-component
  • yarn install to install dependencies
  • Add documentations:
    • README.md on component level
    • Unit test
    • Storybook file for snapshot tests and also component showcase/demo
  • Make your changes pass the:
    • yarn lint. You can do yarn lint --fix to automatically fix small lint issues (e.g indentation, whitespace, semicolons, ...)
    • yarn test. Do yarn test -u to automatically the snapshot tests.

Requirements for new component

If you implement a new component, make sure that it complies with eBay UI guidelines:

One way to comply those guidelines is to implement your new component as similiar as possible with the Marko eBayUI Core, or port the Marko implementation to React. This means the new component should:

  • Output the same HTML structure
  • Have similiar behaviour (e.g open menu dropdown on click and keyboard)
  • Support the same attributes (e.g ebay-breadcrumb a11y-heading-text, or ebay-button priority)
  • Support the same events (e.g ebay-select select-change). Since React does not use event emitter (unlike Marko), one can implement this as a prop with Function.

Changelog

version 9.x (skin 13)

version 8.x (skin 12)

version 6.x (skin 10)

version 5.x (removed less, changed imports to minimize bundle size)

version 3.x (skin 9, react 16.8 with hooks support)

version 2.x (skin 7, react 16.7)

legacy

Keywords

FAQs

Package last updated on 14 Jul 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc