ST-UI-Toolkit

React Components for Common UI Patterns used at Social Tables

ST-UI-Toolkit provides you with a set of React components that are themed according to the ST brand guidelines.

Why?

We decided to build ST-UI-Toolkit because we found that we frequently re-created common components across applications.
We wanted a toolkit where we could consolidate these patterns into a single framework / toolkit that could just be imported into any project.

Browser Support

  • Chrome (mobile and desktop)
  • Safari (mobile and desktop)
  • Firefox
  • Internet Explorer 9, 10, 11
  • Microsoft Edge


Getting Started

ST-UI-Toolkit is available as a public NPM package scoped under the @socialtables organization. Once you have npm you can install ST-UI-Toolkit in your project folder with:

npm install @socialtables/st-ui-toolkit

Import & use Components

We recommend you get started with React first. Once you have a simple application setup you can import any component and use it right away. No stylesheets, font or any other prerequisite needed.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="react-root"></div>
  <!--
    You can use browserify, webpack or similar tools
    to compile & combine your JSX code
  -->
  <script src="bundle.js"></script>
</body>
</html>
const React = require('react');
const ReactDOM = require('react-dom');
const STUIToolkit = require('@socialtables/st-ui-toolkit');
const Button = STUIToolkit.Button;

class App extends React.Component {
  _clickHandler() {
    alert("YOLO");
  }

  render() {
    return <div>
      <Button onClick={this._clickHandler} />
    </div>;
  }
}

ReactDOM.render(<App/>, document.getElementById('react-root'));