sp-dev-fx-webparts/samples/react-adaptivecards-hooks/README.md

# react-adaptivecards-hooks

## Summary

A version of [react-adaptivecards](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-adaptivecards) using React Hooks.

![Adaptive Cards in SharePoint](assets/preview.png)

## Used SharePoint Framework Version

![1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)

## Applies to

* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)

## Solution

Solution|Author(s)
--------|---------
react-adaptivecards-hooks | Paul Schaeflein (http://www.schaeflein.net)

## Version history

Version|Date|Comments
-------|----|--------
1.0|April 27, 2020|Initial release

## Disclaimer

**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**

---

## Minimal Path to Awesome

* Clone this repository
* in the command line run:
  * `npm install`
  * `gulp serve`

### Code structure

| File                         | Type                                             |  Description   |
|------------------------------|--------------------------------------------------|----------------|
| AdaptiveCardViewerWebPart.ts | React Class component (derives from BaseWebPart) | Used to define web part properties and bootstrap the component tree|
| RootComponent.tsx            | React Function component                         | Interrogates webpart properties and establishes AppContext and initial state.<br/>Monitors CardService state and dispatches updates to viewer state. |
| AppContext.ts                | React context provider                           | Exposes the SPFx webpart context, the webpart instance and the state dispatch to all components via `React.useContext()`  |
| CardService.ts               | React Hook                                       | Abstracts the SP HttpClient        |
| CardServiceReducer.ts        | React Reducer                                    | Reducer/state for CardService hook |
| AdaptiveCardViewer.tsx       | React Function component                         | Top-level UI component. |
| AdaptiveCardHost.tsx         | React Function component                         | Renders placeholder if template/data are missing. Handles card actions. |
| AdaptiveCard.tsx             | React Class component                            | Responsible for rendering adaptive card and expanding card with data |

<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-adaptivecards-hooks" />
Update README.md Added telemetry image and pointer back to original adaptive cards sample. 2020-04-27 22:26:44 -04:00			`# react-adaptivecards-hooks`

			`## Summary`

			`A version of [react-adaptivecards](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-adaptivecards) using React Hooks.`

			`![Adaptive Cards in SharePoint](assets/preview.png)`

			`## Used SharePoint Framework Version`

			`![1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)`

			`## Applies to`

URL dev.office.com to docs.microsoft.com 2020-06-09 03:09:22 -04:00			`* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)`
			`* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)`
Update README.md Added telemetry image and pointer back to original adaptive cards sample. 2020-04-27 22:26:44 -04:00
			`## Solution`

			`Solution\|Author(s)`
			`--------\|---------`
			`react-adaptivecards-hooks \| Paul Schaeflein (http://www.schaeflein.net)`

			`## Version history`

			`Version\|Date\|Comments`
			`-------\|----\|--------`
			`1.0\|April 27, 2020\|Initial release`

			`## Disclaimer`

			`*THIS CODE IS PROVIDED AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**`

			`---`

			`## Minimal Path to Awesome`

			`* Clone this repository`
			`* in the command line run:`
			* `npm install`
			* `gulp serve`
react-adaptivecards-hooks sample 2020-04-27 21:50:30 -04:00
			`### Code structure`

			`\| File \| Type \| Description \|`
			`\|------------------------------\|--------------------------------------------------\|----------------\|`
			`\| AdaptiveCardViewerWebPart.ts \| React Class component (derives from BaseWebPart) \| Used to define web part properties and bootstrap the component tree\|`
			`\| RootComponent.tsx \| React Function component \| Interrogates webpart properties and establishes AppContext and initial state.<br/>Monitors CardService state and dispatches updates to viewer state. \|`
			\| AppContext.ts \| React context provider \| Exposes the SPFx webpart context, the webpart instance and the state dispatch to all components via `React.useContext()` \|
			`\| CardService.ts \| React Hook \| Abstracts the SP HttpClient \|`
			`\| CardServiceReducer.ts \| React Reducer \| Reducer/state for CardService hook \|`
			`\| AdaptiveCardViewer.tsx \| React Function component \| Top-level UI component. \|`
			`\| AdaptiveCardHost.tsx \| React Function component \| Renders placeholder if template/data are missing. Handles card actions. \|`
			`\| AdaptiveCard.tsx \| React Class component \| Responsible for rendering adaptive card and expanding card with data \|`
Update README.md Added telemetry image and pointer back to original adaptive cards sample. 2020-04-27 22:26:44 -04:00
			`<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-adaptivecards-hooks" />`