react-component-dy
v1.0.30
Published
This is my customize react component based on typescript
Downloads
38
Readme
ReactComponent-dy
This is my customize react component based on typescript(闲来无事,造些轮子)
Usage
用法与antd类似
npm i --save react-component-dy
import * as React from "react";
import * as ReactDOM from "react-dom";
import { message, Button, Icon, Select, Input, Switch } from "react-component-dy";
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
'value': '',
'checked': false,
'checkbox': false
};
}
render() {
return(
<div>
<Checkbox labelMarginLeft={8} checked={this.state.checkbox} onChange={(e) => {
this.setState({'checkbox': e.target.checked});
}}>
hahahaha
</Checkbox>
<Button onClick={() => {
message.error('error', 3);
toast.error('error');
}}>error</Button>
<div>
<Button
size='small'
type='danger'
onClick={() => console.log('defalut')}
>
default
</Button>
<Button
type='link'
href='https://www.baidu.com'
>
link
</Button>
</div>
<div>
<Icon type='icon-blocked' spin={false} />
<Icon type='icon-checkmark' spin/>
<Icon type='icon-spell-check' spin={true} />
</div>
<div style={{ 'width': '50%' }}>
<Input
placeholder='this is a test'
value={this.state.value}
onChange={(e) => this.setState({ 'value': e.target.value })}
onPressEnter={(e) => console.log(e.currentTarget.value)}
allowClear={true}
spanBefore={<span>test</span>}
spanAfter={'.com'}
prefix={'icon-success'}
suffix={'icon-error'}
/>
</div>
<div>
<Switch
checked={this.state.checked}
onChange={(checked) => this.setState({ 'checked': checked })}
/>
</div>
</div>
);
}
}
ReactDOM.render(
<Demo />,
document.getElementById("container")
);
ReadMe
react16 + typescript + less
目前支持的组件: message、Button、Icon、Select、Input、toast