@esri/calcite-components-react 3.1.0-next.2 → 3.1.0-next.20

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.
Files changed (2) hide show
  1. package/README.md +15 -23
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,33 +1,30 @@
1
1
  # Calcite Components React
2
2
 
3
- A set of React components that wrap [Calcite Components](https://developers.arcgis.com/calcite-design-system/components/). An application using this package is provided in the [`calcite-components-examples`](https://github.com/Esri/calcite-components-examples) repo.
3
+ This package provides React wrappers for [Calcite components](https://developers.arcgis.com/calcite-design-system/components/). Refer to the [React example](https://github.com/Esri/calcite-design-system/tree/dev/examples/components/react) for a minimal application using this package.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```sh
8
- npm install --save @esri/calcite-components-react
8
+ npm install @esri/calcite-components-react
9
9
  ```
10
10
 
11
- This package includes the compatible version of the main component library as a dependency, so no need to install `@esri/calcite-components` separately.
11
+ This package includes the compatible version of the standard `@esri/calcite-components` package, so you do not need to install it separately.
12
12
 
13
13
  ## Choose a build
14
14
 
15
- There are two builds that are provided by the standard `calcite-components` package.
15
+ There are two builds provided by the standard components package.
16
16
 
17
17
  ### Custom Elements build
18
18
 
19
- [Custom Elements](developers.arcgis.com/calcite-design-system/get-started#custom-elements) is the recommended build when using frontend frameworks, such as React. To use this build, you will need to set the path to the `calcite-components` assets. You can either use local assets, which will be explained in a subsequent step, or assets hosted on a CDN.
19
+ [Custom Elements](developers.arcgis.com/calcite-design-system/get-started#custom-elements) is the recommended build when using frontend frameworks, such as React. Assets from the CDN are used by default, but you can specify a local asset path with `setAssetPath`. Additional setup for using local assets will be explained in a subsequent step.
20
20
 
21
21
  ```jsx
22
- import { setAssetPath } from "@esri/calcite-components/dist/components";
23
- // Local assets
24
- setAssetPath(window.location.href);
22
+ import { setAssetPath } from "@esri/calcite-components";
25
23
 
26
- // CDN hosted assets
27
- // setAssetPath("https://unpkg.com/@esri/calcite-components/dist/calcite/assets");
24
+ setAssetPath(window.location.href);
28
25
  ```
29
26
 
30
- Next, you need to import each component you use from the standard `calcite-component` package's custom elements build. This will automatically define the custom elements on the window. Then import the same components from `calcite-components-react`.
27
+ Next, you need to import each component you use from the standard components package's custom elements build. This will automatically define the custom elements on the window. Then, import the same components from `@esri/calcite-components-react`.
31
28
 
32
29
  ```jsx
33
30
  import "@esri/calcite-components/dist/components/calcite-button";
@@ -38,20 +35,15 @@ import { CalciteButton, CalciteIcon, CalciteSlider } from "@esri/calcite-compone
38
35
 
39
36
  ### Dist build
40
37
 
41
- When using the [Dist](developers.arcgis.com/calcite-design-system/get-started#distribution) build, you'll need to manually define the custom elements on the window. You can also choose between local and CDN hosted assets.
38
+ When using the [Dist](developers.arcgis.com/calcite-design-system/get-started#distribution) build, you'll need to manually define the custom elements on the window:
42
39
 
43
40
  ```jsx
44
41
  import { defineCustomElements } from "@esri/calcite-components/dist/loader";
45
- // Local assets
46
- defineCustomElements(window);
47
42
 
48
- // CDN hosted assets
49
- // defineCustomElements(window, {
50
- // resourcesUrl: "https://unpkg.com/@esri/calcite-components/dist/calcite/assets"
51
- // });
43
+ defineCustomElements();
52
44
  ```
53
45
 
54
- Since you manually defined the custom elements on the window, you only need to import the individual components from `calcite-components-react`.
46
+ Since you manually defined the custom elements on the window, you only need to import the individual components from `@esri/calcite-components-react`.
55
47
 
56
48
  ```jsx
57
49
  import { CalciteButton, CalciteIcon, CalciteSlider } from "@esri/calcite-components-react";
@@ -75,7 +67,7 @@ cp -r node_modules/@esri/calcite-components/dist/calcite/assets/* ./public/asset
75
67
 
76
68
  ## Why not just use the web components directly?
77
69
 
78
- Because React uses a synthetic event system, the custom events emitted from calcite components won't work with JSX in React. For example, say you want to update some value when the `calcite-slider` component changes. When using the standard web components, you need to save a ref to the element, and add a listener:
70
+ Because React uses a synthetic event system, the custom events emitted from Calcite components won't work with JSX in React. For example, say you want to update some value when the `calcite-slider` component changes. When using the standard web components, you need to save a ref to the element, and add a listener:
79
71
 
80
72
  ```jsx
81
73
  const sliderEl = useRef(null);
@@ -85,7 +77,7 @@ function onUpdate(event) {
85
77
  setSliderValue(event.target.value);
86
78
  }
87
79
 
88
- // need to access the dom node to set custom event listeners for props that aren't strings / numbers
80
+ // need to access the DOM node to set custom event listeners for props that aren't strings or numbers
89
81
  // lit.dev/docs/frameworks/react#why-are-wrappers-needed
90
82
  useEffect(
91
83
  (_) => {
@@ -95,7 +87,7 @@ useEffect(
95
87
  );
96
88
  ```
97
89
 
98
- Using `calcite-components-react`, these events are connected for you:
90
+ Using `@esri/calcite-components-react`, these events are connected for you:
99
91
 
100
92
  ```jsx
101
93
  const [sliderValue, setSliderValue] = useState(50);
@@ -106,7 +98,7 @@ If you're using TypeScript, you'll also get increased type safety for your event
106
98
 
107
99
  ## Contributing
108
100
 
109
- We welcome contributions to this project. See the main [calcite-components CONTRIBUTING.md](../../../../CONTRIBUTING.md) for an overview of contribution guidelines.
101
+ We welcome contributions to this project. See the [CONTRIBUTING.md](https://github.com/Esri/calcite-design-system/blob/dev/CONTRIBUTING.md) for an overview of contribution guidelines.
110
102
 
111
103
  ## License
112
104
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@esri/calcite-components-react",
3
- "version": "3.1.0-next.2",
3
+ "version": "3.1.0-next.20",
4
4
  "description": "A set of React components that wrap calcite components",
5
5
  "homepage": "https://developers.arcgis.com/calcite-design-system/",
6
6
  "repository": {
@@ -26,7 +26,7 @@
26
26
  "tsc": "tsc"
27
27
  },
28
28
  "dependencies": {
29
- "@esri/calcite-components": "3.1.0-next.2",
29
+ "@esri/calcite-components": "3.1.0-next.20",
30
30
  "@lit/react": "1.0.7"
31
31
  },
32
32
  "peerDependencies": {
@@ -36,5 +36,5 @@
36
36
  "volta": {
37
37
  "extends": "../../package.json"
38
38
  },
39
- "gitHead": "904d4f1e3e64cfcd67bac16f7327aeef604a38b3"
39
+ "gitHead": "a5e9dfb38df2dd9c614a379882761c29c1db5613"
40
40
  }