@stellaestudio/react2o

Ready2order Design System - Foundation React components library

Install package

After installing npm or yarn, you can install @stellaestudio/react2o with this command:

# with npm
npm i -S @stellaestudio/react2o

# with yarn
yarn add @stellaestudio/react2o

Install fonts

Roboto & Roboto Condensed fonts as described in Typography section will not be automatically loaded. Fortunately, there is a few easy ways to get started.

Shown below is a sample link markup used to load from a CDN:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Condensed:ital,wght@0,400;0,700;1,700&display=swap"
/>

You can also do it via CSS Import:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Condensed:ital,wght@0,400;0,700;1,700&display=swap');

Otherwise, you can install them with typeface:

# with npm
npm i -S typeface-roboto typeface-roboto-condensed

# with yarn
yarn add typeface-roboto typeface-roboto-condensed

Then, you can import them in your entry-point:

import 'typeface-roboto';
import 'typeface-roboto-condensed';

Usage

Using a React component

Once you have installed this package, you just have to import components you need in your React application!

Here is an example of the integration of Button component:

import { Button } from '@stellaestudio/react2o';

const MyComponent = () => (
  <CheckoutButton onClick={() => console.log('clicked')}>Click</CheckoutButton>
);

If you need to display icons, you will need to import @stellaestudio/r2icon icon font like this:

import '@stellaestudio/r2icon/dist/r2icon/font/r2icon.css';

Or you can also import it with a CDN like unpkg.com with this file.

Overriding styles & behaviors

This library is made to give you a standard. However, it is quite possible to modify components by passing them new props & styles.

To do this, there are a multitude of solutions.