import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import DateRangeCalendar from '..'
# DateRangeCalendar
## Importing the component in your project.
```js
import {DateRangeCalendar} from 'pcm-shared-components';
```
### Usage
Check out the index.stories.jsx file DateRangeCalendarComp to see a full simple example of how it whould be used in.
#### Minimum REQUIRED setup NEEDED to get the DateRangeCalendar working:
```js
import React, {useState} from 'react'
import {DateRangeCalendar } from 'pcm-shared-components';
function App() {
//States
const [state, setState] = useState({ startDate: null, endDate: null, focusedInput: 'startDate' })
//Functions
const handleDatesChange = (data) => {
setState(data)
}
const handleOnFocusChange = (data) =>{
setState((previousState)=>{return{...previousState,focusedInput:data}});
}
return (
)
}
```
### See a Codesandbox example with styling
https://codesandbox.io/s/react-date-picker-rangeinput-jw726?from-embed=&file=/src/index.js:2503-2537
### Styling Props
The following are the theme props taken form the codesandbox from above so I have a local copy of the possible props.
```js
```