@amp-labs/react 1.17.7 → 2.0.2
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 +45 -2
- package/build/amp-react.cjs.js +13 -13
- package/build/amp-react.es.js +1206 -1201
- package/build/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -23,17 +23,33 @@ This repository contains the Ampersand React library, a set of React components
|
|
|
23
23
|
|
|
24
24
|
## Prerequisites
|
|
25
25
|
- React version 18+
|
|
26
|
-
|
|
26
|
+
|
|
27
|
+
### Legacy (@amp-labs/react 1.x.x)
|
|
28
|
+
Requires
|
|
29
|
+
- Chakra 2.4.4 - 2.10 (https://chakra-ui.com/getting-started)
|
|
27
30
|
- Chakra peer dependencies: @emotion/react, @emotion/styled, framer-motion
|
|
28
31
|
|
|
29
32
|
## Installation
|
|
30
33
|
|
|
31
|
-
In your repo, use `npm` to install the package:
|
|
34
|
+
In your repo, use `npm` or `yarn` to install the package [`@amp-labs/react`](https://www.npmjs.com/package/@amp-labs/react):
|
|
32
35
|
|
|
33
36
|
```sh
|
|
34
37
|
npm install @amp-labs/react
|
|
35
38
|
```
|
|
36
39
|
|
|
40
|
+
```sh
|
|
41
|
+
yarn add @amp-labs/react
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Migrating to @amp-labs/react 2.0+ from 1.x.x
|
|
45
|
+
@amp-labs/react 2.0+ no longer requires chakra as a dependency. Chakra dependencies (@chakra-ui/react @emotion/react @emotion/styled framer-motion)
|
|
46
|
+
are no longer required.
|
|
47
|
+
|
|
48
|
+
@amp-labs/react now ships with its own stylesheet which also allows users to override colors,
|
|
49
|
+
fonts, and other css variables. See [Usage changes](#changes-with-2.0)
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
### Legacy (@amp-labs/react 1.x.x)
|
|
37
53
|
If you are using yarn, you'll have to also install the peer dependencies.
|
|
38
54
|
```
|
|
39
55
|
yarn add @amp-labs/react @chakra-ui/react @emotion/react @emotion/styled framer-motion
|
|
@@ -43,6 +59,33 @@ yarn add @amp-labs/react @chakra-ui/react @emotion/react @emotion/styled framer-
|
|
|
43
59
|
|
|
44
60
|
Please visit [our documentation](https://docs.withampersand.com/v1.0/docs/embeddable-ui-components) to learn more about how to use this library.
|
|
45
61
|
|
|
62
|
+
### Changes with 2.0
|
|
63
|
+
In addition to importing components, the default stylesheet must also be imported. You may also override
|
|
64
|
+
`--amp` css variables from default [styles](https://github.com/amp-labs/react/blob/main/src/styles/variables.css) by importing your own stylesheet.
|
|
65
|
+
|
|
66
|
+
```
|
|
67
|
+
import { AmpersandProvider } from '@amp-labs/react';
|
|
68
|
+
import '@amp-labs/react/styles'; // amp-labs style sheet
|
|
69
|
+
import './App.css'; // optional: your own css override
|
|
70
|
+
|
|
71
|
+
const options = {
|
|
72
|
+
project: 'PROJECT', // Your Ampersand project name or ID.
|
|
73
|
+
apiKey: 'API_KEY',// Your Ampersand API key.
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
function App() {
|
|
77
|
+
return (
|
|
78
|
+
// Wrap all your components inside AmpersandProvider.
|
|
79
|
+
// You can either do this at the App level,
|
|
80
|
+
// or further down in the component tree.
|
|
81
|
+
<AmpersandProvider options={options}>
|
|
82
|
+
// You can use any of the Ampersand components here.
|
|
83
|
+
...
|
|
84
|
+
</AmpersandProvider>
|
|
85
|
+
)
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
46
89
|
## License
|
|
47
90
|
|
|
48
91
|
This repository is licensed under the **MIT license**.
|