15215dd8fe | ||
---|---|---|
.. | ||
assets | ||
config | ||
sharepoint/assets | ||
src | ||
teams | ||
.editorconfig | ||
.gitignore | ||
.yo-rc.json | ||
README.md | ||
gulpfile.js | ||
package-lock.json | ||
package.json | ||
tsconfig.json | ||
tslint.json |
README.md
Adaptive Cards using React Hooks
Summary
A version of react-adaptivecards using React Hooks.
Compatibility
Applies to
Solution
Solution | Author(s) |
---|---|
react-adaptivecards-hooks | Paul Schaeflein (http://www.schaeflein.net) |
react-adaptivecards-hooks | Hugo Bernier (Tahoe Ninjas, @bernier) |
Version history
Version | Date | Comments |
---|---|---|
1.0 | April 27, 2020 | Initial release |
2.0 | August 25, 2020 | Upgraded to SPFx 1.11 and added support for May 2020 changes to Adaptive Cards |
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 web part properties and establishes AppContext and initial state. Monitors CardService state and dispatches updates to viewer state. |
AppContext.ts | React context provider | Exposes the SPFx web part context, the web part 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 |
Help
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you're having issues building the solution, please run spfx doctor from within the solution folder to diagnose incompatibility issues with your environment.
If you encounter any issues while using this sample, create a new issue.
For questions regarding this sample, create a new question.
Finally, if you have an idea for improvement, make a suggestion.
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.