@sibipro/caffeine

Component library for Sibi. Not really intended for public consumption.

Components here are built around the Material-UI library, and in some cases those components are exposed directly.

Check out http://caffeine.sibi.sh for information about the components.

Installation

Install the package and all peer dependencies.

// yarn is the best, use it
yarn add @sibipro/caffeine

// add peer dependencies
yarn add react react-dom prop-types

Usage

You can use components directly, and they will automatically use the "website" theme.

import React from 'react';
import Button from '@sibipro/caffeine/components/Button';

const App = () => (
  <>
    <p>I am some React app.</p>
    <Button color="primary" variant="contained" onClick={() => alert('You clicked me!')}>Click Me</Button>
  </>
);

If you would like to modify the appearance of your components by using a different theme, use the <ThemeProvider /> component. This is a provider that you pass the theme into, then make the rest of your app a child of it.

import React from 'react';
import theme from '@sibipro/caffeine/themes/website'
import ThemeProvider from '@sibipro/caffeine/components/ThemeProvider';
import Button from '@sibipro/caffeine/components/Button';

const App = () => (
  <ThemeProvider theme={theme}>
    <p>I am some React app.</p>
    <Button color="primary" variant="contained" onClick={() => alert('You clicked me!')}>Click Me</Button>
  </ThemeProvider>
);

export default App;

You can also override a theme by nesting another <ThemeProvider /> in the main app. This works exactly like the Material-UI Theme Provider.