# airbnb-ui

**Repository Path**: weixq709/airbnb-ui

## Basic Information

- **Project Name**: airbnb-ui
- **Description**: an airbnb adaptation component library
- **Primary Language**: JavaScript
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-23
- **Last Updated**: 2023-02-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# airbnb-ui

#### 介绍
an airbnb adaptation component library

#### 安装教程

```node
npm install git+https://gitee.com/coderweq/airbnb-ui.git
```

#### 使用说明

1. 样例

```jsx
import { DatePicker } from 'airbnb-ui'

const App = memo(() => {
  const ref = useRef()
  
  const dateChange = (dataList) => {
    // eg: [20221001, 20221128]
    console.log(dateList)
  }
  
  // 手动关闭组件
  const close = () => {
    ref.current.close()
  }
  
  // 手动打开组件
  const open = () => {
    ref.current.open()
  }
  
  // 外部初始化并监听改变
  const changeVisiable = (visiable) => {
    console.log(visiable);
  }
  
  return (
  	<div>
      <button onClick={open}>打开</button>
    	<DatePicker ref={ref} visiable={false} change={dateChange} changeVisiable={changeVisiable}/>
    </div>
  )
})
```

2. 组件方法

   | 方法名称 | 说明         | 参数 |
   | -------- | ------------ | ---- |
   | open     | 打开日期组件 | 无   |
   | clear    | 清除组件状态 | 无   |

3. props

   | 参数   | 说明                                                         | 参数     |
   | :----- | ------------------------------------------------------------ | -------- |
   | change | 选择日期改变回调方法，选择日期或点击组件外部会关闭组件并传递选择日期 | dateList |