global-react-components

Shared component library of react components to be used across the e-commerce site

Documentation

Installation

npm

npm i -s @skechers/global-react-components

yarn

yarn add @skechers/global-react-components

Usage

Named imports

import React, { Component } from 'react';
import { Alert, Button, Carousel, RangeInput} from '@skechers/global-react-components';

class Example extends Component {
  render() {
    return (
      <>
        <Alert warning header="Warning!">Careful now</Alert>
        <Button tertiary onClick="() => alert('click!')">Hi I&apos;m a button</Button>
        <Carousel>
          <div>1</div>
          <div>1</div>
          <div>1</div>
          <div>0</div>
          <div>1</div>
          <div>1</div>
        </Carousel>
        <RangeInput onChange="() => alert('nice value you got there')"/>
      </>
    );
  }
}

Import all

import React, { Component } from 'react';
import * as Grc from '@skechers/global-react-components';

class Example extends Component {
  render() {
    return (
      <>
        <Grc.Alert warning header="Warning!">Careful now</Grc.Alert>
        <Grc.Button tertiary onClick="() => alert('click!')">Hi I&apos;m a button</Grc.Button>
        <Grc.Carousel>
          <div>1</div>
          <div>1</div>
          <div>1</div>
          <div>0</div>
          <div>1</div>
          <div>1</div>
        </Grc.Carousel>
        <Grc.RangeInput onChange="() => alert('nice value you got there')"/>
      </>
    );
  }
}

Components and Props

For all available components, go here

Storybook

For a storybook with docs and previews download this