Markdown rendering with React Components inside at build time - javascript

I have a very specific issue with Preact/React:
I have a .md file with some text, which uses react-router's <Link> tags inside for navigation. Like this:
## Heading
<Link to="/test">Let's go here</Link>
In my Component file, I render the Markdown and import the Link Component and pass the Link-components down, using the preact-markup component:
...
import {Link} from 'react-router-dom';
import text from './text.md';
import Markup from 'preact-markup';
export default class Comp extends Component {
render() {
return <Markup markup={text} components={{Link, HashLink}} />;
}
}
For importing the markdown, I use the #nuxtjs/markdown-it-loader, which works fine. It all works as expected, but doesn't feel clean.
I would like to be able to either import the Link components inside the markdown file, which would save me some boilerplate code for every view.
Or, even better, I would like to be able to write my markdown inside the Component itself, with the appropriate imports, and compile it all to HTML at build time.
I don't like runtime components since they need downloading and parse- and render time.

Related

How can I use style tag in JSX

So I'm in a situation where I have to use <style> tag, That is because I have multiple pages (I'm using react router DOM) so I cant apply the same style to every page as that would mess things up. Is there a way I can use <style> tag in JSX?
I have to use style tag like this:
function RandomScreen(){
return (
<div>
<style></style>
</div>
)
}
You can simply import a stylesheet into your page:
import './main.css'
Another solution is to use Emotion and the Global component:
https://emotion.sh/docs/globals
Can you use separate css file for every component and import every css file in every component you need.
import './RandomScreen.css';

Device specific style loading in react

I have an application in which I am using different views for mobile and desktop instead of going for responsive design. I am using server side rendering for my application.
Here is the code for browser starter file
import React from "react";
import App from "../shared/App";
import MobApp from "../shared/MobApp";
hydrate(<BrowserRouter>{__IS_MOBILE__ ? <MobApp /> : <App />}</BrowserRouter>
Here I render 'MobApp' component in case the site is loaded on mobile and 'App' in case the site is loaded on desktop.
Here is a dummy code for 'MobApp' component
import React,{ Component } from 'react';
import Header from './views/Mobile/layouts/Header';
import './MobApp.scss';
export class MobApp extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Header />
</div>
);
}
}
export default MobApp
As it is clear I am using import for loading component level CSS. Now 'Header' component inside this has it's own CSS import.
Problem -
If someone opens the site on desktop view, the code for 'MobApp' imports like MobApp.scss and all it's child components like 'Header' is also included. As a result I am able to get the CSS of mobile components on desktop.
What all approaches can I use to avoid this?
I have read about conditional imports and will try them out but would like to know if there is something better out there.
Also, let me know if I need to change the way I am adding CSS to my components or is there a more scalable way to do the same to avoid any future problems.

Trying to apply pure JavaScript effects to React ant-table component

I am very new to React and have recently inherited a project that was created with create-react-app. The project is partially done and I want to make the columns of a particular table adjustable (the user should drag and adjust the width). The previous developers used ant-table to create the table, which has no such feature.
I figured I could try and do this using plain js, like this fiddle: http://jsfiddle.net/thrilleratplay/epcybL4v/
However, I cannot make it work. I have included the js code as a inside index.html, have also tried calling it inside the .js file of the component.
This is my component code:
import React, {Component, PropTypes} from 'react';
import {Icon} from 'antd';
import Table from '../../components/tables/AntdTable.pg';
class SampleScreen extends Component {
render(){
return (
<Table data={this.props.availableFlavors.map(this.props.generateFruitList)}
selectRow={this.props.selectRow}
headers={this.props.tableHeaders} />
);
}
}
SampleScreen.propTypes = {
availableFlavors : PropTypes.array.isRequired,
tableHeaders: PropTypes.array.isRequired,
selectRow: PropTypes.object.isRequired,
generateFruitList: PropTypes.func.isRequired,
};
export default SampleScreen;
I am not sure if this is even possible, again, please bear with a React noob here. Any help is greatly appreciated.
Check the examples at antd website on how to create tables.
Resizable column

How load image as a react prop from the local directory?

This is the component I am trying to render which is being mapped over and the necessary props are being dropped in. One of those props are an image that is sitting in the local directory. When i type in that same '..images/example.png' it will load with out a problem. But when this data is being mapped over and the image directory is being dropped in as the image prop, it says that it cannot find the module. Any ideas why or what I can do to remedy this?
import React, {Component} from 'react';
import {Link} from 'react-router-dom'
class Project extends Component {
render(){
let {
id,
image
}
= this.props
return(
<div className='project-container'>
<h1>{id}</h1>
<img src={require(image)} />
<p>description</p>
<p>technologies used</p>
<img src={require('../images/git.png')} />
</div>
)
}
}
export default Project;
Your image prop shouldn't contain the path to image. But just the name of the image. Then you should read the image by doing something like
<img src={require('../images/'+image)}
Make sure the variable image just has the name of the actual image and not the path.
Two possibilities I can think of.
If you have created your React app using create-react-app, then there should be a folder called public.
You need to put all your static assets (images, videos, mp3) in there.
If you have started from scratch (or from a boilerplate) using webpack, you need to import it (e.g. import Git from './img/git.png') and configure the webpack to handle PNG or other types or image files.

Configure js-beautify within a react component

I am using js-beautify (the html-beautify option) to format html that is being displayed on my page, it displays but it's collapsing all the html to 1 line which is obviously not ideal because it's a pain to read. It is basically trying to format HTML as Javascript because the actual html beautify is not being applied.
I'm using it in react as below inside a specific component file for that item does anyone know how to fix this?
import htmlBeautify from 'js-beautify'
const htmlString = htmlBeautify(renderToStaticMarkup(<Component />))
export default () =>
<Example staticMarkup={htmlString}>
<Component />
</Example>
Update:
<Example/> is another component that renders out a bunch of additional stuff like a markdown description.
I'm using https://github.com/alexlande/react-style-guide to create a styleguide and passing the static html markup to staticMarkup prop to display rather than just showing the react component which in this context isn't particulary useful.

Categories