- Project is built on top of Create React App
- UI library used: Material UI
Live demo is available https://istinkevics.github.io/material-ui-ctco-user-selector/ via GitHub Pages
- @material-ui/core
- react
- react-dom
- 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.
-
users
- list of users -
selected
- array of selected users -
onChange
- get updates from user list checkboxes -
UserCardProps
(optional) - contains properties that you can use inUserCard
component, (currently you can modify onlyclasses
) -
classes
(optional) - override component classes
- Install library dependencies
yarn build
- Run library in watch mode
yarn start
- Go to
examples
directory and install dependenciescd examples && yarn
- Run demo page
yarn start
- Run
yarn test
oryarn test --watch
Steps were performed on Ubuntu Ubuntu 19.10