You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: content/guides/react/index.mdx
+6-23
Original file line number
Diff line number
Diff line change
@@ -46,31 +46,15 @@ Primer React does not transform code to support older ECMAScript versions (eg. E
46
46
47
47
Any environment that uses Primer React should have all the necessary polyfills installed to comply with the latest code standards, as Primer React does not ship with them. Additionally, as Primer React does not transform code to support older versions, it may be necessary for projects to transform the code if support for older browsers (such as Edge 18) is needed.
48
48
49
-
### Minimizing bundle size
50
-
51
-
Module bundlers that use ECMAScript modules (ESM) will automatically tree-shake Primer React, ensuring that no unused code is included in your final bundle. However, if you're not using ESM, you may be able to drastically reduce the size of your final bundle by importing components individually from the `lib` subfolder:
52
-
53
-
```javascript
54
-
// using import syntax
55
-
importBoxfrom'@primer/react/lib/Box'
56
-
```
57
-
58
-
```javascript
59
-
// using require syntax
60
-
constBox=require('@primer/react/lib/Box')
61
-
```
62
-
63
-
Note that the modules in the `lib` folder are CommonJS-style modules; if you're using ESM and a compatible module bundler, importing files individually from `lib` provides no benefit.
64
-
65
49
### Peer dependencies
66
50
67
51
Primer React ships with a few libraries labeled as peer dependencies. These libraries are commonly already installed in host projects and installing multiple versions can introduce errors.
68
52
69
53
Primer React requires the following peer dependencies:
70
54
71
-
-`styled-components` at version 4.0.0 or higher
72
-
-`react` at versions 17.x or higher
73
-
-`react-dom` at versions 17.x or higher
55
+
-`styled-components` at version 5.0.0 or higher
56
+
-`react` at versions 18.x or higher
57
+
-`react-dom` at versions 18.x or higher
74
58
75
59
## BaseStyles
76
60
@@ -133,13 +117,12 @@ Like React, Primer React emits warnings to the JavaScript console under certain
133
117
134
118
## Testing
135
119
136
-
Testing your application with Primer React is no different than testing your application with any other React library. Depending on your test environment and the testing libraries you use, you may need polyfills. For example, `jest` runs via Node runtime and uses [JSDOM](https://github.com/jsdom/jsdom) as a DOM implementation, meaning you will need to mock some browser APIs. We have [helpers](https://github.com/primer/react/blob/main/src/utils/test-helpers.tsx) that can be used to mock some of these APIs. You can import the helpers in your test setup file like so:
120
+
Testing your application with Primer React is no different than testing your application with any other React library. Depending on your test environment and the testing libraries you use, you may need polyfills. For example, `jest` runs via Node runtime and uses [JSDOM](https://github.com/jsdom/jsdom) as a DOM implementation, meaning you will need to mock some browser APIs. We have [helpers](https://github.com/primer/react/blob/main/packages/react/src/utils/test-helpers.tsx) that can be used to mock some of these APIs. You can import the helpers in your test setup file like so:
137
121
138
122
```js
139
-
import'@primer/react/lib-esm/utils/test-helpers'// For ESM
140
-
import'@primer/react/lib/utils/test-helpers'// For CommonJS
123
+
import'@primer/react/test-helpers'
141
124
```
142
125
143
126
## More information
144
127
145
-
See the [primer/react repository](https://github.com/primer/react/tree/main/docs/content) for more information about how to use and contribute to Primer React. For component-specific documentation, check out the React section in the component's docs (example: [ActionList](/components/action-list/react)).
128
+
See the [primer/react repository](https://github.com/primer/react) for more information about how to use and contribute to Primer React. For component-specific documentation, check out the React section in the component's docs (example: [ActionList](/components/action-list/react)).
0 commit comments