react-lite-dropdown
v0.2.1
Published
Dropdown menu from Talk by teambition
Downloads
20
Readme
React Lite Dropdown
Dropdown component from Talk by Teambition.
Demo http://ui.talk.ai/react-lite-dropdown/
Properties
####Dropdown
displayText
(string)
Text to display when selected. You will get is-chosen
in className
of root element when it's specified.
defaultText
(string.isRequired)
Text to display when displayText
is undefined
.
name
(string)
CSS hook for this components, defaults to default
. Suppose it's x
, the generated className
is is-for-x
.
show
(bool.isRequired)
Defines whether DropdownMenu
is shown or not.
onToggle
(func.isRequired)
Things happened when toggle dropdown.
this.props.children
Content to render in the menu opened after clicked.
Supposition
This component suppose you are using it in such scenarios:
- it looks like
<select>
, with default text and selected - but you need to render arbitrary view, rather than list of items
- click events bubbles to
window
and menu is then closed
In chinese. 中文表达更明确一些, 这个组件做了一些假定, 使用需要注意:
- 基本界面类似
<select>
, 有 选中/未选中 状态, 用 CSS hook 修改颜色 - 打开菜单具体界面不在 Component 中控制, 要以
this.props.children
传入 - 通过监听 window 的 click 事件关闭菜单, 注意不好截断
Usage
npm i --save react-lite-dropdown
Read src/main.jsx(compiles with Babel) for details:
import {default as React} from 'react';
import './demo.css';
import {default as LiteDropdown} from 'react-lite-dropdown';
import 'react-lite-dropdown/src/style.css'; // CSS if you need
var languages = 'CoffeeScript PureScript Elm CirruScript'.split(' ');
var App = React.createClass({
displayName: 'page-app',
getInitialState: function() {
return {
lang: undefined
};
},
onItemClick: function(lang) {
return this.setState({
lang: lang
});
},
renderLanguages: function() {
console.log(languages);
var self = this;
return languages.map(function(lang) {
var onClick = function() {
return self.onItemClick(lang);
};
return <div key={lang} className={'item'} onClick={onClick}>{lang}</div>;
});
},
render: function() {
return <LiteDropdown
displayText={this.state.lang}
defaultText={'Click to select one'}
name={'css-hook-demo'}>{this.renderLanguages()}</LiteDropdown>
}
});
var PageApp = React.createFactory(App);
var demo = document.querySelector('.demo');
React.render(PageApp(), demo);
Develop
npm i
You need a static file server for the HTML files. Personally I suggest using Nginx.
Develop:
gulp html # regenerate index.html
webpack-dev-server --hot # enable live-reloading
Build (Pack and optimize js, reivision js and add entry in index.html
):
gulp build
License
MIT