https://github.com/im-rises/cube-ascii-react
Cube ASCII Art component package made in React
https://github.com/im-rises/cube-ascii-react
ascii ascii-ract cube javascript npm package react typescript
Last synced: 8 months ago
JSON representation
Cube ASCII Art component package made in React
- Host: GitHub
- URL: https://github.com/im-rises/cube-ascii-react
- Owner: Im-Rises
- License: mit
- Created: 2023-05-16T04:28:17.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-28T02:32:36.000Z (about 2 years ago)
- Last Synced: 2025-04-26T17:47:44.734Z (8 months ago)
- Topics: ascii, ascii-ract, cube, javascript, npm, package, react, typescript
- Language: TypeScript
- Homepage: https://im-rises.github.io/cube-ascii-react-website/
- Size: 807 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# cube-ascii-react
## Description
This is a package to create a 3D ASCII cube in React.
## 🚀🚀[You can try it online from your browser](https://im-rises.github.io/cube-ascii-react-website/) 🚀🚀
You can find the package in the npm registry:
## 🚀🚀 [The package is available on npm](https://www.npmjs.com/package/cube-ascii-react) 🚀🚀
## Demo video
https://github.com/Im-Rises/cubeAscii/assets/59691442/f5bd5eae-67f1-4b75-88f0-6140808ba2f8
## Package installation
To install it type `npm install cube-ascii-react` in your terminal to install it.
Then you can import it in your project with `import ParticleSimulator from 'cube-ascii-react'`.
## Usage
To use it you can simply add the component in your project like this:
```tsx
import React, {useEffect, useState} from 'react';
import './App.scss';
import {CubeAscii} from './components/CubeAscii';
const App: React.FC = () => {
const divRef = React.useRef(null);
const preTagRef = React.useRef(null);
const [isLoaded, setIsLoaded] = useState(false);
const [useColor, setUseColor] = useState(true);
const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(text);
console.log('Text copied to clipboard');
} catch (err: unknown) {
console.error('Failed to copy text: ', err);
}
};
useEffect(() => {
if (divRef.current) {
setIsLoaded(true);
}
}, [divRef]);
return (
{
isLoaded
? (<>
>
)
: (
Loading...
)
}
);
};
export default App;
```
or you can change some settings like this:
```tsx
import React, {useEffect, useState} from 'react';
import './App.scss';
import {CubeAscii} from './components/CubeAscii';
const App: React.FC = () => {
const divRef = React.useRef(null);
const preTagRef = React.useRef(null);
const [isLoaded, setIsLoaded] = useState(false);
const [useColor, setUseColor] = useState(true);
const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(text);
console.log('Text copied to clipboard');
} catch (err: unknown) {
console.error('Failed to copy text: ', err);
}
};
useEffect(() => {
if (divRef.current) {
setIsLoaded(true);
}
}, [divRef]);
return (
{
isLoaded
? (<>
{
setUseColor(!useColor);
}}/>
copyToClipboard(preTagRef.current!.innerText)}>Copy to clipboard
>
)
: (
Loading...
)
}
);
};
export default App;
```
The component takes 1 to 9 props:
- `parentRef` - a reference to the parent div of the canvas. It is used to get the size of the canvas.
- `screenWidth` - the resolution of the cube view in characters.
- `screenHeight` - the height of the cube view in characters.
- `cubeWidthHeight` - the width and height of the cube in characters.
- `distanceFromCamera` - the distance from the camera to the cube.
- `framerate` - the framerate of the animation.
- `useColor` - a boolean to use colors or not.
- `defaultColor` - the default color of the cube when `useColor` is set to `false`.
- `preTagRef` - a reference to the pre tag that contains the cube. You can use it to copy the cube to the clipboard.
You can find the complete example of the project in the GitHub
repository [here](https://im-rises.github.io/cube-ascii-react-website).
> **Note**
> Make sure to follow the example: set the parent div of the canvas before instantiating the cube.
## GitHub Actions
[](https://github.com/Im-Rises/cube-ascii-react/actions/workflows/node.js.yml)
[](https://github.com/Im-Rises/cube-ascii-react/actions/workflows/eslint.yml)
[](https://github.com/Im-Rises/cube-ascii-react/actions/workflows/codeql.yml)
[](https://github.com/Im-Rises/cube-ascii-react/actions/workflows/npm-publish.yml)
The project is set up to run the following actions:
- node.js.yml : Runs the tests for the Node.js project.
- eslint.yml : Runs the ESLint linter on the project.
- codeql.yml : Runs the CodeQL linter on the project.
- npm-publish.yml : Publishes the package to npm.
## Libraries
React:
Xo:
ESLint:
GitHub gh-pages:
react-device-detect:
## Documentation
The Coding Challenge (math and physics):
P5.js:
P5.js React:
## Links
Check the source code
on [](https://github.com/im-rises/cube-ascii-react)
Check the demo
on [](https://github.com/im-rises/cube-ascii-react-website)
Check the package
on [](https://www.npmjs.com/package/cube-ascii-react)
## Contributors
Quentin MOREL :
- @Im-Rises
-
[](https://github.com/Im-Rises/cube-ascii-react/graphs/contributors)