{"id":13422328,"url":"https://github.com/nikolovlazar/chakra-ui-prose","last_synced_at":"2025-03-17T09:30:42.526Z","repository":{"id":38013361,"uuid":"473113148","full_name":"nikolovlazar/chakra-ui-prose","owner":"nikolovlazar","description":"A custom Chakra UI component that adds ready-made styles for rendering remote HTML content.","archived":false,"fork":false,"pushed_at":"2022-06-12T06:42:08.000Z","size":271,"stargazers_count":67,"open_issues_count":2,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-27T21:50:22.417Z","etag":null,"topics":["chakra-ui","prose","typography"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nikolovlazar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-23T09:12:42.000Z","updated_at":"2024-08-25T17:14:14.000Z","dependencies_parsed_at":"2022-08-27T16:31:08.179Z","dependency_job_id":null,"html_url":"https://github.com/nikolovlazar/chakra-ui-prose","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolovlazar%2Fchakra-ui-prose","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolovlazar%2Fchakra-ui-prose/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolovlazar%2Fchakra-ui-prose/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolovlazar%2Fchakra-ui-prose/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nikolovlazar","download_url":"https://codeload.github.com/nikolovlazar/chakra-ui-prose/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243858794,"owners_count":20359257,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chakra-ui","prose","typography"],"created_at":"2024-07-30T23:00:41.713Z","updated_at":"2025-03-17T09:30:41.996Z","avatar_url":"https://github.com/nikolovlazar.png","language":"TypeScript","funding_links":[],"categories":["🛠️ Tools"],"sub_categories":[],"readme":"# Chakra UI Prose\n\nProse is a Chakra UI component that adds a ready-made typography styles when\nrendering remote HTML.\n\n## Installation\n\n```sh\nyarn add @nikolovlazar/chakra-ui-prose\n\n# or\n\nnpm i @nikolovlazar/chakra-ui-prose\n```\n\n## Usage\n\nTo use the `Prose` component in your app, first you need to use the `withProse`\ntheme extension:\n\n```typescript\nimport { withProse } from '@nikolovlazar/chakra-ui-prose';\n\nconst theme = extendTheme({}, withProse());\n\nexport default theme;\n```\n\n\u003e I know you've already did it, but I want to remind you to pass your theme in\n\u003e your ChakraProvider.\n\nThen, to render the remote HTML content, you need to import the `Prose`\ncomponent and add a `div` element with `dangerouslySetInnerHTML` inside of it:\n\n```jsx\nimport { Prose } from '@nikolovlazar/chakra-ui-prose';\n\nconst MyPage = (content) =\u003e {\n  return (\n    \u003cProse\u003e\n      \u003cdiv dangerouslySetInnerHTML={{ _html: content }} /\u003e\n    \u003c/Prose\u003e\n  );\n};\n\nexport default MyPage;\n```\n\n### Content Sanitization\n\nIf you're rendering content that's not entered by you, it's a good idea to [sanitize](https://en.wikipedia.org/wiki/HTML_sanitization) the content before rendering it. There are numerous packages for content sanitation, but for this example we'll use the [DOMPurify](https://www.npmjs.com/package/dompurify) package. First you need to install the package itself:\n\n```sh\nyarn add dompurify\n\n# or\n\nnpm i dompurify\n```\n\nThen, you need to use the `sanitize` method before rendering your content:\n\n```jsx\nimport { Prose } from '@nikolovlazar/chakra-ui-prose';\nimport DOMPurify from 'dompurify';\n\nconst MyPage = (content) =\u003e {\n  return (\n    \u003cProse\u003e\n      \u003cdiv\n        dangerouslySetInnerHTML={{\n          __html: DOMPurify.sanitize(content),\n        }}\n      /\u003e\n    \u003c/Prose\u003e\n  );\n};\n\nexport default MyPage;\n```\n\nThis way you'll make sure that the user-submitted content will be safe and you won't be exposed to [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.\n\n## Overriding Style\n\nThe `withProse` theme extension has an optional argument that overrides its default style. To change the style of a certain element, supply a component style object in the theme extension, provide the `baseStyle` property and override the element, like so:\n\n```typescript\nconst theme = extendTheme(\n  {},\n  withProse({\n    baseStyle: {\n      h2: {\n        fontWeight: 'light',\n      },\n    },\n  })\n);\n```\n\n\u003e Refer to the [default theme](https://github.com/nikolovlazar/chakra-ui-prose/blob/main/packages/chakra-ui-prose/src/theme.ts) when overriding certain elements.\n\nI've also created a [CodeSandbox](https://codesandbox.io/s/chakra-ui-prose-h2yqrj?file=/src/index.tsx) which you can use to try out the Prose component, and override its default style.\n\n## Making it official\n\nThe Prose package is not part of the official Chakra UI package for a reason. We decided to roll it out as a separate package is to avoid bloating the core library while we figure out how much people actually need it.\n\nIf you want this package to be part of the core library, let us know in this discussion thread: https://github.com/chakra-ui/chakra-ui-docs/discussions/469.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikolovlazar%2Fchakra-ui-prose","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnikolovlazar%2Fchakra-ui-prose","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikolovlazar%2Fchakra-ui-prose/lists"}