https://github.com/richardzcode/of-simplify-react
Easy to use React components extend Office UI Fabric
https://github.com/richardzcode/of-simplify-react
office-ui-fabric office365 react
Last synced: 9 months ago
JSON representation
Easy to use React components extend Office UI Fabric
- Host: GitHub
- URL: https://github.com/richardzcode/of-simplify-react
- Owner: richardzcode
- License: mit
- Created: 2018-07-12T20:42:47.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-01T20:40:17.000Z (over 7 years ago)
- Last Synced: 2025-07-01T00:57:21.472Z (10 months ago)
- Topics: office-ui-fabric, office365, react
- Language: JavaScript
- Homepage:
- Size: 113 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# of-simplify-react
[](https://opensource.org/licenses/MIT)
[](https://badge.fury.io/js/of-simplify-react)
[](https://www.npmjs.com/package/of-simplify-react)
[]()
Easy to use React components extend [Office UI Fabric](https://github.com/OfficeDev/office-ui-fabric-react)
## Install
```
npm install of-simplify-react
```
## Components
- [CommandBar](#commandbar)
- [AutoComplete](#autocomplete)
### CommandBar
- Write `CommandBarItem` like React component.
- Style `CommandBar` and `CommandBarItem` like React component.
- Handle `onCommand` event to reduce repetitive code.
```
import React, { Component } from 'react';
import OfSimplify, { CommandBar, CommandBarItem } from 'of-simplify-react';
OfSimplify.initializeIcons(); // in order to show icons
class App extends Component {
constructor(props) {
super(props);
this.handleCommand = this.handleCommand.bind(this);
}
handleCommand(key) {
console.log('menu item clicked: ' + key);
}
render() {
Home
Cat
Coffee
Preferences
Sign Out
}
}
export default App;
```
### AutoComplete
- Simple auto-complete component combines `TextField` and `List`
```
import React, { Component } from 'react';
import { AutoComplete } from 'of-simplify-react';
const directors = [
{ name: 'John Thompson' },
{ name: 'Bradford Smith' },
{ name: 'Satya Nadella' },
{ name: 'William Gates' },
{ name: 'Amy Hood' },
{ name: 'Christopher Caposseia' },
{ name: 'Kathleen Hogan' },
{ name: 'Jean-Philippe Courtois' },
{ name: 'Margaret Johnson' },
{ name: 'Kevin Scott' },
{ name: 'Sean Ventura' },
{ name: 'Reid Hoffman' },
{ name: 'Hugh Johnston' },
{ name: 'Teri List-Stoll' },
{ name: 'Charles Noski' },
{ name: 'Helmut Panke' },
{ name: 'Sandra Peterson' },
{ name: 'Charles Scharf' },
{ name: 'John Stanton' },
{ name: 'Padmasree Warrior' }
];
const autoCompleteSearch= function(directors, q) {
q = q.toLowerCase();
return directors.filter(director => director.name.toLowerCase().match(q))
}
class App extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(val) {
console.log('selected ' + val);
}
autoCompleteRenderCell(director, style) {
return
director.name
}
render() {
const style = {
list: {
marginLeft: '5em',
item: { name: { color: 'blue' } }
}
}
director.name}
autoCompleteSearch={autoCompleteSearch}
autoCompleteRenderCell={this.autoCompleteRenderCell}
onChange={this.handleChange}
underlined
/>
}
}
export default App;
```