sparta-html-styler is a React package that provides a component for rendering HTML strings into a Notion-like UI, following the Sparta design system.
npm install @teamsparta/html-stylersparta-html-styler is a React package that provides a component for rendering HTML strings into a Notion-like UI, following the Sparta design system.
You can install the package using npm:
``bashUsing npm
npm install sparta-html-styler
Usage
`jsx
import { HtmlStyler } from 'sparta-html-styler';function MyComponent() {
const htmlContent =
Content
Code example; return ;
}
`Supported HTML Elements
sparta-html-styler supports the following HTML elements:
- Code blocks
- Callouts
- Array-type elements (ul, ol)
- h1, h2, h3
- \
- Toggles (details, summary)
- Images
- File downloads
- Links
- Checkboxes
- Mathematical equationsFeatures
1. XSS Prevention: Uses the DOMPurify package to sanitize input HTML, ensuring safety from XSS (Cross-Site Scripting) attacks.
2. Style Isolation: Employs Shadow DOM and
all: initial styling to completely isolate from external styles, ensuring consistent styling.3. Notion-style UI: Provides a Notion-like UI based on the Sparta design system.
Dependencies
The package uses the following key dependencies:
- React (^18.0.0) and React DOM (^18.0.0) as peer dependencies
- @emotion/cache (^11.13.1), @emotion/react (^11.13.3), @emotion/styled (^11.13.0): For efficient styling solutions
- @teamsparta/design-system (^2.7.2): Sparta's design system components
- better-react-mathjax (^2.0.3): For rendering mathematical equations
- dompurify (^3.1.6): For sanitizing HTML to prevent XSS attacks
- html-react-parser (^5.1.16): For parsing HTML strings into React components
- react-shadow (^20.5.0): For creating shadow DOM roots
- react-syntax-highlighter (^15.5.0): For syntax highlighting in code blocks
Example
`jsx
import { HtmlStyler } from 'sparta-html-styler';const htmlContent =
console.log('Hello, Sparta!');;function App() {
return (
);
}
``MIT
Bug reports, feature requests, and pull requests are always welcome. Please check the project's contribution guidelines before contributing.
If you encounter any issues or have questions, please open an issue.