{"id":22710575,"url":"https://github.com/smallhelm/react-ansi-style","last_synced_at":"2025-08-07T15:31:21.488Z","repository":{"id":57144262,"uuid":"57165945","full_name":"smallhelm/react-ansi-style","owner":"smallhelm","description":"Convert a styled ansi string to react-dom spans with classes for the styles","archived":false,"fork":false,"pushed_at":"2016-04-27T01:21:27.000Z","size":34,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-11T20:48:03.724Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/smallhelm.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":"2016-04-26T22:23:32.000Z","updated_at":"2019-04-01T00:46:36.000Z","dependencies_parsed_at":"2022-09-06T08:54:19.289Z","dependency_job_id":null,"html_url":"https://github.com/smallhelm/react-ansi-style","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallhelm%2Freact-ansi-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallhelm%2Freact-ansi-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallhelm%2Freact-ansi-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smallhelm%2Freact-ansi-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smallhelm","download_url":"https://codeload.github.com/smallhelm/react-ansi-style/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229057638,"owners_count":18013289,"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-12-10T12:10:39.169Z","updated_at":"2024-12-10T12:10:39.720Z","avatar_url":"https://github.com/smallhelm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-ansi-style\n\n[![build status](https://secure.travis-ci.org/smallhelm/react-ansi-style.png)](https://travis-ci.org/smallhelm/react-ansi-style)\n[![dependency status](https://david-dm.org/smallhelm/react-ansi-style.svg)](https://david-dm.org/smallhelm/react-ansi-style)\n\nConvert a styled ansi string to react spans with classes for the styles\n\n## Example\n```js\nvar _ = require('lodash');\nvar jsCss = require('js-managed-css');\nvar React = require('react');\nvar ReactDOM = require('react-dom');\nvar reactAnsiStyle = require('react-ansi-style');\n\n//build up a styled string to test with\nvar chalk = require('chalk');\nchalk.enabled = true;\nvar test_styles = _.without(_.keys(chalk.styles), 'reset', 'grey', 'hidden');\nvar ansi_string = _.map(test_styles, function(style){\n  return chalk[style](style);\n}).join(' ');\n\n//make this look like a terminal\njsCss({\n  'html, body': {\n    'color': '#DDD !important',\n    'background': '#222 !important',\n    'line-height': '1.5em',\n    'font-family': 'mono'\n  }\n});\nrequire('react-ansi-style/inject-css');//default css styles\n\nReactDOM.render(React.createElement('div', null,\n\n  //////////////////////////////////\n  //Here is where the magic happens\n  reactAnsiStyle(React, ansi_string)\n\n), document.body);\n```\n\n![react-ansi-style demo](https://raw.githubusercontent.com/smallhelm/react-ansi-style/master/example.png)\n\n## API\n### reactAnsiStyle = require('react-ansi-style')\n### reactAnsiStyle(React, str, opts)\nA function that returns an array of react `span` elements with css classes to style the string.\n * `React` - yes, pass in the React object, this avoids many of the React's peer-dependancy quirks.\n * `str` - the ansi string you want styled.\n * `opts.prefix` - a string prefix for the css classes, by default it's 'react-ansi-style-'\n\n### require('react-ansi-style/inject-css')\nThis will inject the default CSS styling.\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmallhelm%2Freact-ansi-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmallhelm%2Freact-ansi-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmallhelm%2Freact-ansi-style/lists"}