• react-components
  • Installation
  • Basic usage
  • Use in create-react-app
  • Development
  • Contribute
  • License

react-components

Installation

npm install @tradeshift/react-components

Basic usage

1. import styles in your entry

import '@tradeshift/react-components/dist/react-components.css';

2. import components

import { Button } from '@tradeshift/react-components';

ReactDOM.render(<Button>Name</Button>, mountNode);

Use in create-react-app

create-react-app is one of the best React application development tools. We are going to use @tradeshift/react-components within it.

First of all, you need install create-react-app, see more .

Now we install @tradeshift/react-components from yarn or npm.

yarn add @tradeshift/react-components

Modify src/App.js, import Button component from @tradeshift/react-components.

import React, { Component } from 'react';
import '@tradeshift/react-components/dist/react-components.css';
import './App.css';
import { Button } from '@tradeshift/react-components';

class App extends Component {
	render() {
		return (
			<div className="App">
				<Button icon="add">Add</Button>
			</div>
		);
	}
}

export default App;

Ok, you should now see a button displayed on the page. Next you can choose any components of @tradeshift/react-components to develop your application. Visit other workflows of create-react-app at its User Guide .

Development

git clone git@github.com:Tradeshift/react-components.git
cd react-components
npm i
npm start

Open your browser and visit http://localhost:3003 , see more at Development Instructions .

Create a new component

npm run create-component
? Please input component name (PascalCase), e.g. Panel, PanelHeader... » ComponentName
? Please choose your program language » - Use arrow-keys. Return to submit.
>  TypeScript
   JavaScript

Open: https://tradeshift.github.io/react-components/#/Components/ComponentName

Contribute

Any code pushed to master will be automatically released to npm with an appropriate semantic version. Releases are handled automatically by Jenkins via semantic-release. Make sure to follow our commit guidelines when commiting. We support commitizen styles. Install it via npm install -g commitizen and use git cz instead of git commit.

License

Licensed as MIT, see LICENSE.md.