{"id":13422302,"url":"https://github.com/mustaphaturhan/chakra-ui-markdown-renderer","last_synced_at":"2025-03-15T11:31:35.759Z","repository":{"id":38324073,"uuid":"236329195","full_name":"mustaphaturhan/chakra-ui-markdown-renderer","owner":"mustaphaturhan","description":"react-markdown renderer for people who using Chakra-UI's CSSReset component","archived":false,"fork":false,"pushed_at":"2023-01-06T17:21:08.000Z","size":568,"stargazers_count":127,"open_issues_count":8,"forks_count":18,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-02T08:37:48.441Z","etag":null,"topics":[],"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/mustaphaturhan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-26T15:10:50.000Z","updated_at":"2024-08-31T14:23:44.000Z","dependencies_parsed_at":"2023-02-06T07:00:18.440Z","dependency_job_id":null,"html_url":"https://github.com/mustaphaturhan/chakra-ui-markdown-renderer","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/mustaphaturhan%2Fchakra-ui-markdown-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mustaphaturhan%2Fchakra-ui-markdown-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mustaphaturhan%2Fchakra-ui-markdown-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mustaphaturhan%2Fchakra-ui-markdown-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mustaphaturhan","download_url":"https://codeload.github.com/mustaphaturhan/chakra-ui-markdown-renderer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221572086,"owners_count":16845580,"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":[],"created_at":"2024-07-30T23:00:41.313Z","updated_at":"2024-10-26T19:32:47.763Z","avatar_url":"https://github.com/mustaphaturhan.png","language":"TypeScript","funding_links":[],"categories":["🛠️ Tools","TypeScript"],"sub_categories":[],"readme":"## Chakra UI Markdown Renderer\n\n \u003ca href=\"https://www.npmjs.com/package/chakra-ui-markdown-renderer\" alt=\"NPM\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/chakra-ui-markdown-renderer?color=green\u0026style=flat-square\" /\u003e\n\u003c/a\u003e\n\nThis package is created for people who using [Chakra-UI's](https://chakra-ui.com/) and [react-markdown](https://github.com/remarkjs/react-markdown) together.\n\n### The Problem\n\nCSSReset component is turning down every default style of elements that provided by browser. HTML elements like h1, h2, h3... aren't get default styles but Markdown need them for rendering purposes. This package is solving the problem by changing renderer defaults with chakra-ui's components.\n\n### Install\n\n- Install @chakra-ui/react by following their [Getting Started - Chakra UI](https://chakra-ui.com/getting-started) guide.\n- Install [react-markdown](https://github.com/remarkjs/react-markdown).\n- Install `chakra-ui-markdown-renderer`.\n\n```sh\n$ yarn add chakra-ui-markdown-renderer\n\n# or\n\n$ npm i chakra-ui-markdown-renderer\n```\n\n### Usage\n\n```jsx\nimport ChakraUIRenderer from 'chakra-ui-markdown-renderer';\n\n\u003cReactMarkdown components={ChakraUIRenderer()} children={markdown} skipHtml /\u003e;\n```\n\n### Extending Defaults\n\n`chakra-ui-markdown-renderer` is merging standart theme with your theme by default.\n\n```jsx\nimport ChakraUIRenderer from 'chakra-ui-markdown-renderer';\n\nconst newTheme = {\n  p: props =\u003e {\n    const { children } = props;\n    return (\n      \u003cText mb={2} fontSize={'12px'}\u003e\n        {children}\n      \u003c/Text\u003e\n    );\n  },\n};\n\n\u003cReactMarkdown\n  components={ChakraUIRenderer(newTheme)}\n  children={markdown}\n  skipHtml\n/\u003e;\n```\n\n#### Alternative ways\n\n[@nikolovlazar/chakra-ui-prose](https://www.npmjs.com/package/@nikolovlazar/chakra-ui-prose) might also work depends on your needs.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmustaphaturhan%2Fchakra-ui-markdown-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmustaphaturhan%2Fchakra-ui-markdown-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmustaphaturhan%2Fchakra-ui-markdown-renderer/lists"}