material-ui-ctco-user-selector

Hometask for C.T.Co

• Project is built on top of Create React App
• UI library used: Material UI

Live demo

Live demo is available https://istinkevics.github.io/material-ui-ctco-user-selector/ via GitHub Pages

Prerequisites (peer dependencies)

• @material-ui/core
• react
• react-dom

Component Usage

• install package yarn add material-ui-ctco-user-selector

import React, { useState } from 'react';
import UserSelector, { User } from 'material-ui-ctco-user-selector';

export const users: User[] = [{
  id: 1,
  name: 'Mark',
  surname: 'Zuckerberg',
  company: 'Facebook',
  image: 'https://upload.wikimedia.org/wikipedia/commons/1/14/Mark_Zuckerberg_F8_2018_Keynote_%28cropped_2%29.jpg',
}];

const MyComponent: React.FC = (): React.ReactElement => {
  const [selected, setSelected] = useState<number[]>([]);

  return (
    <UserSelector
      users={users}
      selected={selected}
      onChange={setSelected}
    />
  );
};

All state management is done outside of component as it's typical usage for such components.

Props

• users - list of users
• selected - array of selected users
• onChange - get updates from user list checkboxes
• UserCardProps (optional) - contains properties that you can use in UserCard component, (currently you can modify only classes)
• classes (optional) - override component classes

Development

1. Install library dependencies yarn build
2. Run library in watch mode yarn start
3. Go to examples directory and install dependencies cd examples && yarn
4. Run demo page yarn start

Testing

1. Run yarn test or yarn test --watch

Note:

Steps were performed on Ubuntu Ubuntu 19.10