{"id":16323574,"url":"https://github.com/im-rises/cube-ascii-react","last_synced_at":"2026-05-06T19:04:34.636Z","repository":{"id":166054882,"uuid":"641242141","full_name":"Im-Rises/cube-ascii-react","owner":"Im-Rises","description":"Cube ASCII Art component package made in React","archived":false,"fork":false,"pushed_at":"2023-09-28T02:32:36.000Z","size":826,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-26T17:47:44.734Z","etag":null,"topics":["ascii","ascii-ract","cube","javascript","npm","package","react","typescript"],"latest_commit_sha":null,"homepage":"https://im-rises.github.io/cube-ascii-react-website/","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/Im-Rises.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-16T04:28:17.000Z","updated_at":"2023-06-13T15:01:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"f817f138-712f-49ae-b6ef-ca9097b8a6f1","html_url":"https://github.com/Im-Rises/cube-ascii-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Im-Rises%2Fcube-ascii-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Im-Rises%2Fcube-ascii-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Im-Rises%2Fcube-ascii-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Im-Rises%2Fcube-ascii-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Im-Rises","download_url":"https://codeload.github.com/Im-Rises/cube-ascii-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254160636,"owners_count":22024574,"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":["ascii","ascii-ract","cube","javascript","npm","package","react","typescript"],"created_at":"2024-10-10T22:55:10.658Z","updated_at":"2026-05-06T19:04:29.612Z","avatar_url":"https://github.com/Im-Rises.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cube-ascii-react\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\" alt=\"reactLogo\" style=\"height:50px;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/JavaScript-323330?style=for-the-badge\u0026logo=javascript\u0026logoColor=F7DF1E\" alt=\"javascriptLogo\" style=\"height:50px;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\" alt=\"typescriptLogo\" style=\"height:50px;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Sass-CC6699?style=for-the-badge\u0026logo=sass\u0026logoColor=white\" alt=\"scssLogo\" style=\"height:50px;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/CSS-239120?\u0026style=for-the-badge\u0026logo=css3\u0026logoColor=white\" alt=\"cssLogo\" style=\"height:50px;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/p5%20js-ED225D?style=for-the-badge\u0026logo=p5dotjs\u0026logoColor=white\" alt=\"cssLogo\" style=\"height:50px;\"\u003e\n\u003c/p\u003e\n\n## Description\n\nThis is a package to create a 3D ASCII cube in React.\n\n## 🚀🚀[You can try it online from your browser](https://im-rises.github.io/cube-ascii-react-website/) 🚀🚀\n\nYou can find the package in the npm registry:\n\n## 🚀🚀 [The package is available on npm](https://www.npmjs.com/package/cube-ascii-react) 🚀🚀\n\n## Demo video\n\nhttps://github.com/Im-Rises/cubeAscii/assets/59691442/f5bd5eae-67f1-4b75-88f0-6140808ba2f8\n\n## Package installation\n\nTo install it type `npm install cube-ascii-react` in your terminal to install it.\n\nThen you can import it in your project with `import ParticleSimulator from 'cube-ascii-react'`.\n\n## Usage\n\nTo use it you can simply add the component in your project like this:\n\n```tsx\nimport React, {useEffect, useState} from 'react';\nimport './App.scss';\nimport {CubeAscii} from './components/CubeAscii';\n\nconst App: React.FC = () =\u003e {\n    const divRef = React.useRef\u003cHTMLDivElement\u003e(null);\n    const preTagRef = React.useRef\u003cHTMLPreElement\u003e(null);\n    const [isLoaded, setIsLoaded] = useState(false);\n    const [useColor, setUseColor] = useState(true);\n\n    const copyToClipboard = async (text: string) =\u003e {\n        try {\n            await navigator.clipboard.writeText(text);\n            console.log('Text copied to clipboard');\n        } catch (err: unknown) {\n            console.error('Failed to copy text: ', err);\n        }\n    };\n\n    useEffect(() =\u003e {\n        if (divRef.current) {\n            setIsLoaded(true);\n        }\n    }, [divRef]);\n    return (\n        \u003cdiv className={'App'} ref={divRef}\u003e\n            {\n                isLoaded\n                    ? (\u003c\u003e\n                            \u003cCubeAscii parentRef={divRef}/\u003e\n                        \u003c/\u003e\n                    )\n                    : (\n                        \u003cp\u003eLoading...\u003c/p\u003e\n                    )\n            }\n        \u003c/div\u003e\n    );\n};\n\nexport default App;\n\n```\n\nor you can change some settings like this:\n\n```tsx\nimport React, {useEffect, useState} from 'react';\nimport './App.scss';\nimport {CubeAscii} from './components/CubeAscii';\n\nconst App: React.FC = () =\u003e {\n    const divRef = React.useRef\u003cHTMLDivElement\u003e(null);\n    const preTagRef = React.useRef\u003cHTMLPreElement\u003e(null);\n    const [isLoaded, setIsLoaded] = useState(false);\n    const [useColor, setUseColor] = useState(true);\n\n    const copyToClipboard = async (text: string) =\u003e {\n        try {\n            await navigator.clipboard.writeText(text);\n            console.log('Text copied to clipboard');\n        } catch (err: unknown) {\n            console.error('Failed to copy text: ', err);\n        }\n    };\n\n    useEffect(() =\u003e {\n        if (divRef.current) {\n            setIsLoaded(true);\n        }\n    }, [divRef]);\n    return (\n        \u003cdiv className={'App'} ref={divRef}\u003e\n            {\n                isLoaded\n                    ? (\u003c\u003e\n                            \u003cbutton onClick={() =\u003e {\n                                setUseColor(!useColor);\n                            }}/\u003e\n                            \u003cbutton className={'Button-Copy-Clipboard'}\n                                    onClick={async () =\u003e copyToClipboard(preTagRef.current!.innerText)}\u003eCopy to clipboard\n                            \u003c/button\u003e\n                            \u003cCubeAscii parentRef={divRef} useColor={useColor} preTagRef={preTagRef}/\u003e\n                        \u003c/\u003e\n                    )\n                    : (\n                        \u003cp\u003eLoading...\u003c/p\u003e\n                    )\n            }\n        \u003c/div\u003e\n    );\n};\n\nexport default App;\n\n```\n\nThe component takes 1 to 9 props:\n\n- `parentRef` - a reference to the parent div of the canvas. It is used to get the size of the canvas.\n- `screenWidth` - the resolution of the cube view in characters.\n- `screenHeight` - the height of the cube view in characters.\n- `cubeWidthHeight` - the width and height of the cube in characters.\n- `distanceFromCamera` - the distance from the camera to the cube.\n- `framerate` - the framerate of the animation.\n- `useColor` - a boolean to use colors or not.\n- `defaultColor` - the default color of the cube when `useColor` is set to `false`.\n- `preTagRef` - a reference to the pre tag that contains the cube. You can use it to copy the cube to the clipboard.\n\nYou can find the complete example of the project in the GitHub\nrepository [here](https://im-rises.github.io/cube-ascii-react-website).\n\n\u003e **Note**  \n\u003e Make sure to follow the example: set the parent div of the canvas before instantiating the cube.\n\n## GitHub Actions\n\n[![Node.js CI](https://github.com/Im-Rises/cube-ascii-react/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/Im-Rises/cube-ascii-react/actions/workflows/node.js.yml)\n[![ESLint](https://github.com/Im-Rises/cube-ascii-react/actions/workflows/eslint.yml/badge.svg?branch=main)](https://github.com/Im-Rises/cube-ascii-react/actions/workflows/eslint.yml)\n[![CodeQL](https://github.com/Im-Rises/cube-ascii-react/actions/workflows/codeql.yml/badge.svg?branch=main)](https://github.com/Im-Rises/cube-ascii-react/actions/workflows/codeql.yml)\n[![Node.js Package](https://github.com/Im-Rises/cube-ascii-react/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/Im-Rises/cube-ascii-react/actions/workflows/npm-publish.yml)\n\nThe project is set up to run the following actions:\n\n- node.js.yml : Runs the tests for the Node.js project.\n- eslint.yml : Runs the ESLint linter on the project.\n- codeql.yml : Runs the CodeQL linter on the project.\n- npm-publish.yml : Publishes the package to npm.\n\n## Libraries\n\nReact:  \n\u003chttps://reactjs.org/docs/getting-started.html\u003e\n\nXo:  \n\u003chttps://github.com/xojs/xo\u003e  \n\u003chttps://github.com/xojs/eslint-config-xo-react\u003e  \n\u003chttps://github.com/xojs/eslint-config-xo-typescript\u003e\n\nESLint:  \n\u003chttps://eslint.org/docs/latest/user-guide/getting-started\u003e\n\nGitHub gh-pages:  \n\u003chttps://github.com/gitname/react-gh-pages\u003e\n\nreact-device-detect:  \n\u003chttps://www.npmjs.com/package/react-device-detect\u003e\n\n## Documentation\n\nThe Coding Challenge (math and physics):  \n\u003chttps://www.youtube.com/watch?v=OAcXnzRNiCY\u003e\n\nP5.js:  \n\u003chttps://p5js.org/\u003e\n\nP5.js React:  \n\u003chttps://www.npmjs.com/package/react-p5\u003e\n\n## Links\n\nCheck the source code\non [![github](https://user-images.githubusercontent.com/59691442/223556058-6244e346-8117-43cd-97c6-bf68611bf286.svg)](https://github.com/im-rises/cube-ascii-react)\n\nCheck the demo\non [![github](https://user-images.githubusercontent.com/59691442/223556058-6244e346-8117-43cd-97c6-bf68611bf286.svg)](https://github.com/im-rises/cube-ascii-react-website)\n\nCheck the package\non [![npm](https://user-images.githubusercontent.com/59691442/223556055-4e9ef014-79d4-4136-ac07-b837b49066c8.svg)](https://www.npmjs.com/package/cube-ascii-react)\n\n## Contributors\n\nQuentin MOREL :\n\n- @Im-Rises\n- \u003chttps://github.com/Im-Rises\u003e\n\n[![GitHub contributors](https://contrib.rocks/image?repo=Im-Rises/cube-ascii-react)](https://github.com/Im-Rises/cube-ascii-react/graphs/contributors)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fim-rises%2Fcube-ascii-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fim-rises%2Fcube-ascii-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fim-rises%2Fcube-ascii-react/lists"}