@truefit/bach-material-ui v2.1.0

@truefit/bach-material-ui

This library connects components composed with @truefit/bach to Material UI.

This library is based on the hooks found in Material UI 4 and above

Installation

npm install @truefit/bach-material-ui @truefit/bach @material-ui/core @material-ui/styles

or

yarn add @truefit/bach-material-ui @truefit/bach @material-ui/core @material-ui/styles

Enhancers

withStyles

Allows you to specify a set of styles with Material UI for the wrapped component.

Helper Signature

You can also specify a function as the value of an individual property and be passed the props object to then return the value (see fontSize in the example below).

Example

Typescript

import React from 'react';
import {compose, withState, withCallback} from '@truefit/bach';
import {withStyles} from '@truefit/bach-material-ui';
import {Theme} from '@material-ui/core';

type Props = {
  classes: {
    container: string;
    h1: string;
    h2: string;
    button: string;
  };

  fontSize: number;

  setFontSize: (n: number) => void;
  increase: () => void;
};

const WithStyles = ({classes, fontSize, increase}: Props) => (
  <div className={classes.container}>
    <h1 className={classes.h1}>withStyles</h1>
    <h2 className={classes.h2}>Font Size: {fontSize}</h2>
    <button type="button" className={classes.button} onClick={increase}>
      ^ Increase ^
    </button>
  </div>
);

export default compose(
  withState('fontSize', 'setFontSize', 12),
  withCallback<Props>('increase', ({fontSize, setFontSize}) => () => {
    setFontSize(fontSize + 1);
  }),
  withStyles((theme: Theme) => ({
    container: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100%',
      flexDirection: 'column',
    },
    h1: {
      color: theme.palette.primary.main,
    },
    h2: {
      color: theme.palette.secondary.main,
      fontSize: ({fontSize}: Props) => fontSize,
    },
    button: {
      height: 50,
      width: 100,
      borderRadius: 8,
    },
  })),
)(WithStyles);

Javascript

import React from 'react';
import {compose, withState, withCallback} from '@truefit/bach';
import {withStyles} from '@truefit/bach-material-ui';

const WithStyles = ({classes, fontSize, increase}) => (
  <div className={classes.container}>
    <h1 className={classes.h1}>withStyles</h1>
    <h2 className={classes.h2}>Font Size: {fontSize}</h2>
    <button className={classes.button} onClick={increase}>
      ^ Increase ^
    </button>
  </div>
);

export default compose(
  withState('fontSize', 'setFontSize', 12),
  withCallback('increase', ({fontSize, setFontSize}) => () => {
    setFontSize(fontSize + 1);
  }),
  withStyles((theme) => ({
    container: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100%',
      flexDirection: 'column',
    },
    h1: {
      color: theme.palette.primary.main,
    },
    h2: {
      color: theme.palette.secondary.main,
      fontSize: ({fontSize}) => fontSize,
    },
    button: {
      height: 50,
      width: 100,
      borderRadius: 8,
    },
  })),
)(WithStyles);

Material UI Hook

makeStyles

withTheme

Provides access to current theme.

Helper Signature

Example

Typescript

import React from 'react';
import {compose} from '@truefit/bach';
import {withTheme} from '@truefit/bach-material-ui';
import {Theme} from '@material-ui/core';

type Props = {
  theme: Theme;
};

const Example = ({theme}: Props) => (
  <div style={{fontSize: theme.typography.fontSize}}>Hello World</div>
);

export default compose(
  withTheme()
)(Example);

Javascript

import React from 'react';
import {compose} from '@truefit/bach';
import {withTheme} from '@truefit/bach-material-ui';

const WithStyles = ({theme}) => (
  <div style={{fontSize: theme.typography.fontSize}}>
    Hello World
  </div>
);

export default compose(
  withTheme(),
)(WithStyles);

Material UI Hook

useTheme