@neshan-maps-platform/react-openlayers 2.0.14 → 2.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,215 +1,221 @@
1
- <p align="center">
2
- <a href="https://platform.neshan.org">
3
- <img width="150" src="https://static.neshanmap.ir/content/places/assets/images/21.png">
4
- </a>
5
- </p>
6
-
7
- <h1 align="center">React Neshan Map Openlayers</h1>
8
- <div align="center">
9
- An official React wrapper for neshan-map-openlayers library
10
- </div>
11
-
12
- <!-- <div align="center">
13
-
14
- An enterprise-class UI design language and React UI library.
15
-
16
- [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
17
-
18
- [![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
19
-
20
- [![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![Issues need help][help-wanted-image]][help-wanted-url]
21
-
22
- [npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
23
- [npm-url]: http://npmjs.org/package/antd
24
- [github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
25
- [github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
26
- [codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
27
- [codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
28
- [download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
29
- [download-url]: https://npmjs.org/package/antd
30
- [fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
31
- [fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
32
- [help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
33
- [help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
34
- [twitter-image]: https://badgen.net/twitter/follow/antdesignui?style=flat-square
35
- [twitter-url]: https://twitter.com/AntDesignUI
36
- [bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
37
- [unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
38
- [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
39
- [bundlephobia-url]: https://bundlephobia.com/package/antd
40
- [issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square
41
- [issues-helper-url]: https://github.com/actions-cool/issues-helper
42
- [renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
43
- [renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
44
-
45
- </div> -->
46
-
47
- <!-- [![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design)
48
-
49
- English | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md)
50
-
51
- ## ✨ Features
52
-
53
- - 🌈 Enterprise-class UI designed for web applications.
54
- - 📦 A set of high-quality React components out of the box.
55
- - 🛡 Written in TypeScript with predictable static types.
56
- - ⚙️ Whole package of design resources and development tools.
57
- - 🌍 Internationalization support for dozens of languages.
58
- - 🎨 Powerful theme customization in every detail.
59
-
60
- ## 🖥 Environment Support
61
-
62
- - Modern browsers
63
- - Server-side Rendering
64
- - [Electron](https://www.electronjs.org/)
65
-
66
- | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
67
- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
68
- | Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | -->
69
- ## ⚙️ Before Install
70
- You need a map key to use our map on your react web application.
71
- You can signup and get a key from [Our Platfrom](https://platform.neshan.org/panel/api-key).
72
- <br/>
73
- For more information, visit our [doc page](https://platform.neshan.org/sdk/react-component#).
74
-
75
-
76
- ## 📦 Install
77
-
78
- ```bash
79
- npm install @neshan-maps-platform/react-openlayers
80
- ```
81
-
82
- ```bash
83
- yarn add @neshan-maps-platform/react-openlayers
84
- ```
85
-
86
- ## 🔨 Usage
87
-
88
- ```jsx
89
- import { useEffect, useRef, useState } from "react"
90
- import "@neshan-maps-platform/react-openlayers/dist/style.css"
91
-
92
- // If you want to use ol types like below, your project has to support typescript.
93
- import { NeshanMap, NeshanMapRef, OlMap, Ol } from "@neshan-maps-platform/react-openlayers"
94
-
95
- function App() {
96
- const mapRef = useRef<NeshanMapRef | null>(null)
97
-
98
- const [ol, setOl] = useState<Ol>()
99
- const [olMap, setOlMap] = useState<OlMap>()
100
-
101
- const onInit = (ol: Ol, map: OlMap) => {
102
- setOl(ol)
103
- setOlMap(map)
104
-
105
- setTimeout(() => {
106
- const view = map.getView()
107
- view.animate({
108
- center: (ol.proj.fromLonLat)([
109
- 51.36281969540723, 35.69672648316882,
110
- ]),
111
- zoom: 12,
112
- duration: 1000,
113
- })
114
- }, 2000)
115
- }
116
-
117
- useEffect(() => {
118
- const interval = setInterval(() => {
119
- if (mapRef.current?.map) {
120
- mapRef.current?.map.setMapType("standard-night")
121
- clearInterval(interval)
122
- }
123
- }, 1000)
124
- return () => clearInterval(interval)
125
- }, [])
126
-
127
- return (
128
- <>
129
- <NeshanMap
130
- mapKey="YOUR_MAP_KEY"
131
- defaultType="neshan"
132
- center={{ latitude: 35.7665394, longitude: 51.4749824 }}
133
- style={{ height: "48vh", width: "100%" }}
134
- onInit={onInit}
135
- zoom={13}
136
- ></NeshanMap>
137
- <hr />
138
- <NeshanMap
139
- ref={mapRef}
140
- mapKey="YOUR_MAP_KEY"
141
- traffic={false}
142
- defaultType="dreamy"
143
- style={{ height: "48vh", width: "100%" }}
144
- ></NeshanMap>
145
- </>
146
- )
147
- }
148
-
149
- export default App
150
- ```
151
-
152
- ### TypeScript
153
-
154
- `@neshan-maps-platform/react-openlayers` is written in TypeScript with complete definitions.
155
- <!-- , check [Use in TypeScript](https://ant.design/docs/react/use-in-typescript) to get started. -->
156
-
157
- <!-- ## 🌍 Internationalization
158
-
159
- Dozens of languages are supported in `antd`, see [i18n](https://ant.design/docs/react/i18n).
160
-
161
- ## 🔗 Links
162
-
163
- - [Home page](https://ant.design/)
164
- - [Components Overview](https://ant.design/components/overview)
165
- - [Ant Design Pro](http://pro.ant.design/)
166
- - [Change Log](CHANGELOG.en-US.md)
167
- - [rc-components](http://react-component.github.io/)
168
- - [Mobile UI](http://mobile.ant.design)
169
- - [Mini Program UI](http://mini.ant.design)
170
- - [Ant Design Pro Components](https://procomponents.ant.design)
171
- - [Ant Design Charts](https://charts.ant.design)
172
- - [Ant Design Icons](https://github.com/ant-design/ant-design-icons)
173
- - [Ant Design Colors](https://github.com/ant-design/ant-design-colors)
174
- - [Landing Pages](https://landing.ant.design)
175
- - [Motion](https://motion.ant.design)
176
- - [Scaffold Market](http://scaffold.ant.design)
177
- - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
178
- - [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
179
- - [FAQ](https://ant.design/docs/react/faq)
180
- - [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports
181
- - [Customize Theme](https://ant.design/docs/react/customize-theme)
182
- - [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
183
-
184
- ## ⌨️ Development
185
-
186
- Use Gitpod, a free online dev environment for GitHub.
187
-
188
- [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design)
189
-
190
- Or clone locally:
191
-
192
- ```bash
193
- $ git clone git@github.com:ant-design/ant-design.git
194
- $ cd ant-design
195
- $ npm install
196
- $ npm start
197
- ```
198
-
199
- Open your browser and visit http://127.0.0.1:8001 , see more at [Development](https://github.com/ant-design/ant-design/wiki/Development).
200
-
201
- ## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
202
-
203
- Read our [contributing guide](https://ant.design/docs/react/contributing) and let's build a better antd together.
204
-
205
- We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
206
-
207
- If you are a collaborator, please follow our [Pull Request principle](https://github.com/ant-design/ant-design/wiki/PR-principle) to create a Pull Request with [collaborator template](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md).
208
-
209
- [![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
210
-
211
- ## ❤️ Sponsors and Backers [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support)
212
-
213
- [![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
214
-
1
+ <p align="center">
2
+ <a href="https://platform.neshan.org">
3
+ <img width="150" src="https://static.neshanmap.ir/content/places/assets/images/21.png">
4
+ </a>
5
+ </p>
6
+
7
+ <h1 align="center">React Neshan Map Openlayers</h1>
8
+ <div align="center">
9
+ An official React wrapper for neshan-map-openlayers library
10
+ </div>
11
+
12
+ <!-- <div align="center">
13
+
14
+ An enterprise-class UI design language and React UI library.
15
+
16
+ [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
17
+
18
+ [![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
19
+
20
+ [![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![Issues need help][help-wanted-image]][help-wanted-url]
21
+
22
+ [npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
23
+ [npm-url]: http://npmjs.org/package/antd
24
+ [github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
25
+ [github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
26
+ [codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
27
+ [codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
28
+ [download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
29
+ [download-url]: https://npmjs.org/package/antd
30
+ [fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
31
+ [fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
32
+ [help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
33
+ [help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
34
+ [twitter-image]: https://badgen.net/twitter/follow/antdesignui?style=flat-square
35
+ [twitter-url]: https://twitter.com/AntDesignUI
36
+ [bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
37
+ [unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
38
+ [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
39
+ [bundlephobia-url]: https://bundlephobia.com/package/antd
40
+ [issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square
41
+ [issues-helper-url]: https://github.com/actions-cool/issues-helper
42
+ [renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
43
+ [renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
44
+
45
+ </div> -->
46
+
47
+ <!-- [![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design)
48
+
49
+ English | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md)
50
+
51
+ ## ✨ Features
52
+
53
+ - 🌈 Enterprise-class UI designed for web applications.
54
+ - 📦 A set of high-quality React components out of the box.
55
+ - 🛡 Written in TypeScript with predictable static types.
56
+ - ⚙️ Whole package of design resources and development tools.
57
+ - 🌍 Internationalization support for dozens of languages.
58
+ - 🎨 Powerful theme customization in every detail.
59
+
60
+ ## 🖥 Environment Support
61
+
62
+ - Modern browsers
63
+ - Server-side Rendering
64
+ - [Electron](https://www.electronjs.org/)
65
+
66
+ | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
67
+ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
68
+ | Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | -->
69
+ ## ⚙️ Before Install
70
+ You need a map key to use our map on your react web application.
71
+ You can signup and get a key from [Our Platfrom](https://platform.neshan.org/panel/api-key).
72
+ <br/>
73
+ For more information, visit our [doc page](https://platform.neshan.org/sdk/react-component#).
74
+
75
+
76
+ ## 📦 Install
77
+
78
+ ```bash
79
+ npm install @neshan-maps-platform/react-openlayers
80
+ ```
81
+
82
+ ```bash
83
+ yarn add @neshan-maps-platform/react-openlayers
84
+ ```
85
+
86
+ If you want full type defenitions including openlayers types, you need to install them as dev dependency.
87
+ ```bash
88
+ yarn add -D @types/ol@5
89
+ ```
90
+
91
+ ## 🔨 Usage
92
+
93
+ ```jsx
94
+ import { useEffect, useRef, useState } from "react"
95
+ import "@neshan-maps-platform/react-openlayers/dist/style.css"
96
+
97
+ import NeshanMap from "@neshan-maps-platform/react-openlayers"
98
+ // If you want to use ol types like below, your project has to support typescript.
99
+ import { NeshanMapRef, OlMap, Ol } from "@neshan-maps-platform/react-openlayers"
100
+
101
+ function App() {
102
+ const mapRef = useRef<NeshanMapRef | null>(null)
103
+
104
+ const [ol, setOl] = useState<Ol>()
105
+ const [olMap, setOlMap] = useState<OlMap>()
106
+
107
+ const onInit = (ol: Ol, map: OlMap) => {
108
+ setOl(ol)
109
+ setOlMap(map)
110
+
111
+ setTimeout(() => {
112
+ const view = map.getView()
113
+ view.animate({
114
+ center: (ol.proj.fromLonLat)([
115
+ 51.36281969540723, 35.69672648316882,
116
+ ]),
117
+ zoom: 12,
118
+ duration: 1000,
119
+ })
120
+ }, 2000)
121
+ }
122
+
123
+ useEffect(() => {
124
+ const interval = setInterval(() => {
125
+ if (mapRef.current?.map) {
126
+ mapRef.current?.map.setMapType("standard-night")
127
+ clearInterval(interval)
128
+ }
129
+ }, 1000)
130
+ return () => clearInterval(interval)
131
+ }, [])
132
+
133
+ return (
134
+ <>
135
+ <NeshanMap
136
+ mapKey="YOUR_MAP_KEY"
137
+ defaultType="neshan"
138
+ center={{ latitude: 35.7665394, longitude: 51.4749824 }}
139
+ style={{ height: "48vh", width: "100%" }}
140
+ onInit={onInit}
141
+ zoom={13}
142
+ ></NeshanMap>
143
+ <hr />
144
+ <NeshanMap
145
+ ref={mapRef}
146
+ mapKey="YOUR_MAP_KEY"
147
+ traffic={false}
148
+ defaultType="dreamy"
149
+ style={{ height: "48vh", width: "100%" }}
150
+ ></NeshanMap>
151
+ </>
152
+ )
153
+ }
154
+
155
+ export default App
156
+ ```
157
+
158
+ ### TypeScript
159
+
160
+ `@neshan-maps-platform/react-openlayers` is written in TypeScript with complete definitions.
161
+ <!-- , check [Use in TypeScript](https://ant.design/docs/react/use-in-typescript) to get started. -->
162
+
163
+ <!-- ## 🌍 Internationalization
164
+
165
+ Dozens of languages are supported in `antd`, see [i18n](https://ant.design/docs/react/i18n).
166
+
167
+ ## 🔗 Links
168
+
169
+ - [Home page](https://ant.design/)
170
+ - [Components Overview](https://ant.design/components/overview)
171
+ - [Ant Design Pro](http://pro.ant.design/)
172
+ - [Change Log](CHANGELOG.en-US.md)
173
+ - [rc-components](http://react-component.github.io/)
174
+ - [Mobile UI](http://mobile.ant.design)
175
+ - [Mini Program UI](http://mini.ant.design)
176
+ - [Ant Design Pro Components](https://procomponents.ant.design)
177
+ - [Ant Design Charts](https://charts.ant.design)
178
+ - [Ant Design Icons](https://github.com/ant-design/ant-design-icons)
179
+ - [Ant Design Colors](https://github.com/ant-design/ant-design-colors)
180
+ - [Landing Pages](https://landing.ant.design)
181
+ - [Motion](https://motion.ant.design)
182
+ - [Scaffold Market](http://scaffold.ant.design)
183
+ - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
184
+ - [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
185
+ - [FAQ](https://ant.design/docs/react/faq)
186
+ - [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports
187
+ - [Customize Theme](https://ant.design/docs/react/customize-theme)
188
+ - [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
189
+
190
+ ## ⌨️ Development
191
+
192
+ Use Gitpod, a free online dev environment for GitHub.
193
+
194
+ [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design)
195
+
196
+ Or clone locally:
197
+
198
+ ```bash
199
+ $ git clone git@github.com:ant-design/ant-design.git
200
+ $ cd ant-design
201
+ $ npm install
202
+ $ npm start
203
+ ```
204
+
205
+ Open your browser and visit http://127.0.0.1:8001 , see more at [Development](https://github.com/ant-design/ant-design/wiki/Development).
206
+
207
+ ## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
208
+
209
+ Read our [contributing guide](https://ant.design/docs/react/contributing) and let's build a better antd together.
210
+
211
+ We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
212
+
213
+ If you are a collaborator, please follow our [Pull Request principle](https://github.com/ant-design/ant-design/wiki/PR-principle) to create a Pull Request with [collaborator template](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md).
214
+
215
+ [![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
216
+
217
+ ## ❤️ Sponsors and Backers [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support)
218
+
219
+ [![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
220
+
215
221
  [![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support) -->