I am downloading README.md file contents using axios in react. The contents are loaded in base64. I want to show all of the contents inside this readme file. I followed these answers but none of them worked for me. Below is my code.
import "./styles.css";
import { useEffect, useState } from 'react';
import axios from 'axios';
export default function App() {
const [md, setMd] = useState('');
useEffect(() => {
async function fetchReadMeContents() {
const response = await axios({
url: "https://api.github.com/repos/zafar-saleem/anymnd/git/blobs/7af90ceab018a889b46634331cab822d94ff2b19",
});
console.log('response: ', response.data);
const text = await response.data.content;
setMd(text);
}
fetchReadMeContents();
}, []);
return (
<code className="App">
{md}
</code>
);
}
The above code renders below.
IyMgUmVxdWlyZW1lbnRzCkJlbG93IGlzIHRoZSBnZXR0aW5nIHN0YXJ0ZWQg c2VjdGlvbiB0byBzdGFydCB0aGUgcHJvamVjdC4gRm9yIG1vcmUgZGV0YWls cywgcGxlYXNlIHJlYWQgdGhlIFt3aWtpXShodHRwczovL2dpdGh1Yi5jb20v emFmYXItc2FsZWVtL2JyZWxhLXRlc3Qvd2lraSkgcGFnZS4KCiMjIEdldHRp bmcgc3RhcnRlZApJbiBvcmRlciB0byBydW4gdGhpcyBwcm9qZWN0IGluIHRo ZSBicm93c2VyIHN1Y2Nlc3NmdWxseSwgcGxlYXNlIGZvbGxvdyB0aGUgc3Rl cHMgYmVsb3chCgogICAgMS4gQ2xvbmUgdGhpcyByZXBvc2l0b3J5LgogICAg Mi4gY2QgaW50byBgL3Jvb3RgIGkuZS4gYGJyZWxhLXRlc3QvYCBkaXJlY3Rv cnkuCiAgICAzLiBSdW4gYHlhcm4vbnBtIGluc3RhbGxgIGNvbW1hbmQgdG8g ZG93bmxvYWQgYW5kIGluc3RhbGwgYWxsIGRlcGVuZGVuY2llcy4KICAgIDQu IFRvIHJ1biB0aGlzIHByb2plY3QgdXNlIGBucG0gc3RhcnQveWFybmAgY29t bWFuZCBpbiBjb21tYW5kIGxpbmUuCiAgICA
Here is codesandbox link https://codesandbox.io/s/floral-wave-8rf4l?file=/src/App.js:0-590.
How can I render readme file contents?
You can use atob() and btoa() built-in functions to convert base64 and strings together.
1. Convert String to Base64 (MDN describes btoa)
The
btoa()method creates a Base64-encoded ASCII string from a binary string (i.e., a String object in which each character in the string is treated as a byte of binary data).
const encodedData = btoa('Hello, world'); // encode a string
2. Convert Base64 to String (MDN describes atob)
The
atob()function decodes a string of data that has been encoded using Base64 encoding.
const decodedData = atob(encodedData); // decode the string
So you can use the following code to render the contents of your README.md file.
useEffect(() => {
async function fetchReadMeContents() {
const response: any = await axios({
url: readmeFileUrl,
});
const text: any = await response.text();
if (response.status === 200) {
setMd(atob(text));
}
}
if (readmeFileUrl) {
fetchReadMeContents();
}
}, [readmeFileUrl]);
return (
<code>{md}</code>
);