# Design week spike research
---
## UI component library
+ A UI component library is collection of common React components
+ Styled Buttons, checkboxes, sliders, icons, navigation menus and datepickers
---
+ Ensures consistent design and feel for all components.
+ Curated by developers with deep knowledge of accessiblity patterns
+ Components are customisable and themeable via props
---
## Top options
+ Material UI - Developed by google, rich and diverse library
+ Chakra - Open source, incredible interactive docs
+ Next UI - Developed by Next team
---

---

---

---
## Rich text editing
- A rich text editor allows you to control certain aspects of your text that you write and also has other features that let you customize it such underline, highlighting and so on.
---
- There were many different libraries for a rich text editing such as draft.js, quill.js, etc that you can import however many of these had documentation that used classes insted of the modern react states for their exmpales.
- I think we can overcome this by just replacing these older keywords such as setState to usestate, mount to useEffect and etc.
---
## PDF and DOCx conversion

A library to generate PDFs in JavaScript
---
`npm install jspdf --save`

---

---
#### Resources
[jsPDF Documentation](https://rawgit.com/MrRio/jsPDF/master/docs/index.html)
---
lil' DEMO
---
# DocxTemplater

Library to convert to Microsoft DOC
---
`npm install docxtemplater pizzip`
---
#### Resources
[DocxTemplater Documentation](https://docxtemplater.com/docs/)
---
lil' [DEMO](https://docxtemplater.com/demo/#html)
---
{"metaMigratedAt":"2023-06-16T21:33:46.032Z","metaMigratedFrom":"Content","title":"Design week spike research","breaks":true,"contributors":"[{\"id\":null,\"add\":561,\"del\":16},{\"id\":\"473a32e9-12bd-45da-a3d3-4ac6fad9042c\",\"add\":779,\"del\":30},{\"id\":\"9e5170a0-78d4-4b78-8fba-f500bdd88450\",\"add\":607,\"del\":1}]"}