@unitedstatespowersquadrons/components 1.1.2 → 1.1.3
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 +24 -0
- package/package.json +1 -1
package/Readme.md
CHANGED
|
@@ -16,6 +16,30 @@ Install dependencies with
|
|
|
16
16
|
yarn
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
+
## Mounting Components
|
|
20
|
+
|
|
21
|
+
Components can be mounted by passing them into the included `mount` function in
|
|
22
|
+
your application asset root.
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
mount({
|
|
26
|
+
ActionButton,
|
|
27
|
+
});
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
This will search the DOM for elements matching the following pattern, and
|
|
31
|
+
attempt to render the corresponding component at that location.
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<div data-react-component="Namespace.Component" data-props="{}"></div>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
In Rails, you can generate this element with the following helper call:
|
|
38
|
+
|
|
39
|
+
```rb
|
|
40
|
+
content_tag(:div, '', data: { 'react-component' => component_name, props: props.to_json })
|
|
41
|
+
```
|
|
42
|
+
|
|
19
43
|
## Toasts
|
|
20
44
|
|
|
21
45
|
More detailed information is available for [Toasts](Toasts/Readme.md) usage.
|