Skip to content

Commit 22e700b

Browse files
committed
Update README.md 📚
1 parent be17b1e commit 22e700b

File tree

1 file changed

+51
-41
lines changed

1 file changed

+51
-41
lines changed

README.md

Lines changed: 51 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -15,48 +15,53 @@
1515
</div>
1616

1717
## Contents
18-
* [Features](#features)
19-
* [Documentation](#documentation)
20-
* [Installation](#installation)
21-
* [Simple Usage](#simple-usage)
22-
* [Theming Options](#theming-options)
23-
* [Playground](#playground)
24-
* [Contributing](#contributing)
25-
26-
## Features
27-
- ✅ Theming options
28-
- ✅ Dark mode
29-
- ✅ Single Date
30-
- ✅ Single date use Range
31-
- ✅ Shortcuts
32-
- ✅ TypeScript support
33-
- ✅ Localization(i18n)
34-
- ✅ Date formatting
35-
- ✅ Disable specific dates
36-
- ✅ Minimum Date and Maximum Date
37-
- ✅ Custom shortcuts
18+
19+
- [Features](#features)
20+
- [Documentation](#documentation)
21+
- [Installation](#installation)
22+
- [Simple Usage](#simple-usage)
23+
- [Theming Options](#theming-options)
24+
- [Playground](#playground)
25+
- [Contributing](#contributing)
26+
27+
## Features
28+
29+
- ✅ Theming options
30+
- ✅ Dark mode
31+
- ✅ Single Date
32+
- ✅ Single date use Range
33+
- ✅ Shortcuts
34+
- ✅ TypeScript support
35+
- ✅ Localization(i18n)
36+
- ✅ Date formatting
37+
- ✅ Disable specific dates
38+
- ✅ Minimum Date and Maximum Date
39+
- ✅ Custom shortcuts
3840

3941
## Documentation
4042

4143
Go to [full documentation](https://react-tailwindcss-datepicker.vercel.app/)
4244

4345
## Installation
4446

45-
⚠️ React Tailwindcss Datepicker uses Tailwind CSS 3 (with the [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms) plugin) & [Dayjs](https://day.js.org/en/) under the hood to work.
47+
⚠️ React Tailwindcss Datepicker uses Tailwind CSS 3 (with the
48+
[@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms) plugin) &
49+
[Dayjs](https://day.js.org/en/) under the hood to work.
4650

4751
### Install via npm
4852

4953
```
50-
$ npm install react-tailwindcss-datepicker
54+
$ npm install react-tailwindcss-datepicker
5155
```
5256

5357
### Install via yarn
5458

5559
```
56-
$ yarn add react-tailwindcss-datepicker
60+
$ yarn add react-tailwindcss-datepicker
5761
```
5862

5963
Make sure you have installed the peer dependencies as well with the below versions.
64+
6065
```
6166
"dayjs": "^1.11.6",
6267
"react": "^17.0.2 || ^18.2.0"
@@ -65,40 +70,41 @@ Make sure you have installed the peer dependencies as well with the below versio
6570
## Simple Usage
6671

6772
#### Tailwindcss Configuration
73+
6874
Add the datepicker to your tailwind configuration using this code
6975

7076
```javascript
7177
// in your tailwind.config.js
7278
module.exports = {
7379
// ...
74-
content: ["./src/**/*.{js,jsx,ts,tsx}", "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js"],
80+
content: [
81+
"./src/**/*.{js,jsx,ts,tsx}",
82+
"./node_modules/react-tailwindcss-datepicker/dist/index.esm.js"
83+
]
7584
// ...
76-
}
85+
};
7786
```
7887

7988
Then use react-tailwindcss-select in your app:
8089

8190
```jsx
82-
import React, {useState} from "react";
91+
import React, { useState } from "react";
8392
import Datepicker from "react-tailwindcss-datepicker";
8493

8594
const App = () => {
8695
const [value, setValue] = useState({
8796
startDate: new Date(),
8897
endDate: new Date().setMonth(11)
8998
});
90-
91-
const handleValueChange = (newValue) => {
99+
100+
const handleValueChange = newValue => {
92101
console.log("newValue:", newValue);
93102
setValue(newValue);
94-
}
95-
103+
};
104+
96105
return (
97106
<div>
98-
<Datepicker
99-
value={value}
100-
onChange={handleValueChange}
101-
/>
107+
<Datepicker value={value} onChange={handleValueChange} />
102108
</div>
103109
);
104110
};
@@ -126,8 +132,8 @@ You can find the demo at [here](https://react-tailwindcss-datepicker.vercel.app/
126132

127133
> **Info**
128134
>
129-
> 👉 To discover the other possibilities offered by this library, you can consult the [full documentation](https://react-tailwindcss-datepicker.vercel.app/).
130-
135+
> 👉 To discover the other possibilities offered by this library, you can consult the
136+
> [full documentation](https://react-tailwindcss-datepicker.vercel.app/).
131137
132138
## PlayGround
133139

@@ -146,18 +152,22 @@ Open a browser and navigate to `http://localhost:8888`
146152

147153
## Contributing
148154

149-
See [CONTRIBUTING.md](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/CONTRIBUTING.md)
155+
See
156+
[CONTRIBUTING.md](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/CONTRIBUTING.md)
150157

151158
## Official Documentation repo
159+
152160
[https://github.com/onesine/react-tailwindcss-datepicker-doc](https://github.com/onesine/react-tailwindcss-datepicker-doc)
153161

154162
## Thanks to
155-
- [Vue Tailwind Datepicker](https://vue-tailwind-datepicker.com/)
156-
- [React](https://reactjs.org/)
157-
- [Tailwind CSS](https://tailwindcss.com/)
158-
- [dayjs](https://day.js.org/)
163+
164+
- [Vue Tailwind Datepicker](https://vue-tailwind-datepicker.com/)
165+
- [React](https://reactjs.org/)
166+
- [Tailwind CSS](https://tailwindcss.com/)
167+
- [dayjs](https://day.js.org/)
159168

160169
I thank you in advance for your contribution to this project.
161170

162171
## License
172+
163173
[MIT](LICENSE) Licensed. Copyright (c) Lewhe Onesine 2022.

0 commit comments

Comments
 (0)