Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/likethemammal/overwatch-settings-select
A React component modeling the Overwatch Settings select/dropdown element
https://github.com/likethemammal/overwatch-settings-select
dropdown game-ui overwatch react-component
Last synced: 4 months ago
JSON representation
A React component modeling the Overwatch Settings select/dropdown element
- Host: GitHub
- URL: https://github.com/likethemammal/overwatch-settings-select
- Owner: likethemammal
- License: apache-2.0
- Created: 2018-03-28T11:09:13.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-18T03:15:20.000Z (over 6 years ago)
- Last Synced: 2024-10-04T20:29:01.504Z (4 months ago)
- Topics: dropdown, game-ui, overwatch, react-component
- Language: JavaScript
- Homepage:
- Size: 4.14 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-overwatch - overwatch-settings-select - A React component modeling the Overwatch Settings select element. (Community / Github)
README
overwatch-settings-select
=========
[](https://travis-ci.org/likethemammal/overwatch-settings-select)
[](https://coveralls.io/github/likethemammal/overwatch-settings-select?branch=master)
[](https://www.npmjs.com/package/overwatch-settings-select)
[](https://www.npmjs.com/package/overwatch-settings-select)
[](https://github.com/likethemammal/overwatch-settings-select/blob/master/LICENSE)
A React component modeling the Overwatch Settings select element
## Install
Note: Requires **React 16.2+**
npm install --save overwatch-settings-select
### Fonts
#### Futura No 2 D DemiBold
This font is used by Activision Blizzard for much of Overwatch's design. For this component **to match the Overwatch design, including the font is required**. It can be licensed from [MyFonts](http://www.myfonts.com/fonts/urw/futura-no-2/futura-no2-d-demi-bold/).
When using CSS font-face, the font-family should match whats below:
font-family: 'Futura No 2 D DemiBold';
## Usage
Check out [example/index.js](example/index.js) for working example or below for exact usage.
import SettingsSelect from 'overwatch-settings-select'
class Example extends React.Component {
state = {
selectedIndex: 0,
}
onChange = (selectedIndex) => {
this.setState({
selectedIndex,
})
}
render() {
const { selectedIndex } = this.state
return
}
}
### Props
| name | required | type | default | desc
--- | --- | --- | --- | --- |
| onChange | **`X`** | function | null | Callback method called when a new option is selected. Parameter is the new selectedIndex to be set in state in the parent component. |
| options | **`X`** | array | null | Array of strings or Components to be displayed as options |
| selectedIndex | **`X`** | string | null | Index of the selected option, should be stored in parent state and changed during `onChange` |
| label | | string | null | Label for the component, positioned to the left of the options |
## Development
npm run dev
#### Running the example
Install it:
cd example/; npm install
Run it while developing (in another terminal window):
cd example/; npm run dev
Open [http://localhost:8080/](http://localhost:8080/) to see the running example
## Tests
npm test
### License
Made with 🍊 by [Chris Dolphin](https://github.com/likethemammal)
[](https://github.com/likethemammal/overwatch-settings-select/blob/master/LICENSE)
#### Fonts
The font **Futura No 2 D DemiBold** should be licensed through [MyFonts.com](http://www.myfonts.com/fonts/urw/futura-no-2/futura-no2-d-demi-bold/)
### Related
- [awesome-overwatch](https://github.com/likethemammal/awesome-overwatch) - A curated list of official Overwatch links and community github repos, codepen demos, and chrome extensions.
- [overwatch-settings-stepper](https://github.com/likethemammal/overwatch-settings-stepper) - A React component modeling the Overwatch Settings the stepper and toggle UI elements.
- [overwatch-side-nav](https://github.com/likethemammal/overwatch-side-nav) - A React component modeling the Official Overwatch website side-navigation.
- [overwatch-table](https://github.com/likethemammal/overwatch-table) - A React component modeling the Overwatch custom game table element.
- [dva-heart-emote](https://github.com/likethemammal/dva-heart-emote) - A WebGL remake of the heart container animation from D.Va's emote.