I need to create a documentation component that renders .md files.
I have a collection of .md files (that could potentially be stored in a DB instead of having files) and I would like to allow users do navigate the documentation and see articles.
About rendering the files I've tried most of the stuff the Google has listed am currently, I am experimenting with the component react-markdown.
I'm having trouble figuring out the code highlight peace and I was wondering if there is a component out there, that does that out of the box or that have it as a straight boolean option.
<ReactMarkdown source={file}/>
note: I've checked the answer in How do I render Markdown from a React component? and couldn't find a good one.
I solved the issue by using React Syntax Highlighter and passing it into React Markdown's renderers attribute. It has a support for Prism.js and Highlight.js syntax highlighter libraries.
Have been searching for the solution for a while, and wrote a blog post on solving the particular problem. Check it out!
Related
Im trying to use the Twilio script tag for an international country list dropdown and I am following this twillio guide to do so. However, I got to a point where it is showing a step where I have to include a script in the html file( for me it is index.html which is react's root file) and use the element from the window object.
Here is the snippet in the guide:
The issue here is that this guide was made with regular html,css, and javascript in mind and not with React/JSX files in mind. Is there any way I can handle this in a react file? Here is the doc in case you guys need to take a look. Thanks!
https://www.twilio.com/blog/international-phone-number-input-html-javascript
Twilio developer evangelist here.
The intl-tel-input project was initially built for jQuery, though no longer depends on it. So it wasn't really written for React, though it might be possible to integrate it with some work.
However, there is a project that has reimplemented the intl-tel-input in React, it's called react-intl-tel-input and might be the thing you are looking for.
You can install it with
npm install react-intl-tel-input
And use it in your React project by importing the component and its CSS:
import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';
Then using the <IntlTelInput> component:
<IntlTelInput
containerClassName="intl-tel-input"
inputClassName="form-control"
/>
See the npm project page for more details.
I have a quite simple question, does anybody know if there is some library out there for JS that could take in Sketch json output and give me back html in a form that I could render directly in browser (so not in form of html/css files but rather as code)?
There is https://www.animaapp.com/ but as far as I understand they export html and css in form of files.
I believe Figma or Zeplin both allow to import Sketch files so I wonder is there something open source out there that I could also use to render our Sketch file/json?
It requires efforts to write a program to convert Sketch into HTML/CSS, we have implemented our own one in our solution.
But the code of direct conversion is unstructural and not responsive, only works for fixed layout.
You can start from the repo below
https://github.com/mludowise/Sketch-HTML-Export
It takes us around 2 months to write a new one for a better quality of conversion.
You can use Desech Studio to import Sketch and then export as React.
The Sketch import will not be 100%. Here's a youtube video that gives more details, but they key things are:
html is positioned relatively with grids
imports all the css
imports images and svgs marked for export
As for React, it uses Facebook's create-react-app as a base. This is the github repo for the Desech Studio react plugin. Ultimately you can fork the react plugin repo and add your own code base and use that instead of the official react plugin.
But I agree with #pxCode This is not a 2 clicks import/export process. It will involve some work from your end too.
I am working with one react project and I am new to react. I was used to doing backend stuff. So my question is in a big project you can track to class instances by clicking their references in visual studio. So we don't have to go in each and every file to find where it is being used.
Is there any way like that in React with Visual studio code. to track the component where it's been imported in the whole app. So we don't have to go in each and every file to find whats the used case of that component.
For example, I have this Modal.js stateless component. And I want to know where it's being exported in whole app so I can know whats props are coming to it and how it is used without going each and every file to find its imports.
One way, albeit simple, is to use the search functionality of Visual Studio Code to search "import Modal" (make sure it is case-sensitive).
This should return each instance/file where you import the component in question.
The search function can be found on the left toolbar where the magnifying glass is.
I am fairly entrenched in the Vue ecosystem, but there is plenty more that I am learning. I recently came across a scenario that I do not know how to approach.
In short, there is a rollup-ed JavaScript file containing some webcomponents that are not Vue. I would like to use these in a Nuxtjs spa. However, using these components in other vue components is proving a bit cumbersome.
I have tried a variety of approaches, e.g.
Locally (in a dockerized environment), I can sandwich my nuxt / vue spa in between these external components by altering src/app.html, on the linked codesandbox however, they do not render correctly
I have tried binding the components to a vue component template via v-html
I have tried Vue.config.ignoredElements
I have tried binding the components with the script tag that injects them
and various combinations thereof. I am providing a codesandbox to play with.
To see the correct behavior, please go to /app.html and copy lines 10-41 into a empty local html file and open it in your browser.
Any ideas how I can get these to play nice?
The only thing I found so far is this article:
https://alligator.io/vuejs/vue-integrate-web-components/
which is where I got the Vue.config.ignoredElements idea
i'm starting to develop an app using Laravel, Vuejs, and blade for template engine.
Firstly, i'm new in Vuejs's world, and maybe is a simple task, but i didn't find an answer in any discussion.
The core idea is to use .blade page, and, when i need vuejs components, add them in the page passing server's data with props array. Everything's working fine, but after playing around for a bit, i've noticed one probably furure problem.
In the laravel's documentation, we register the component, or whatever Vue setting in app.js: then, using laravel mix, we boundle in a single file all the code(e.g imports, requires, different js pages...), and finally we load "app.[hash].js" in our page with a script tag. I've noticed that even only using a few vue components, app.js growing very fast(of course, we import every components in one file), even dinamically importing components and not setting them globally.
My question is: is normal to boundle all js code in a single file(having a large file), or is there a way to import vue component only when they are added in the .blade files, maybe with some sort of webpack(laravel mix) setting?
Thanks in advance for any support.
Found the solution after post the question:
Marcin and GoogleMac's answer might be both right, but i found an interesting topic about that, and i 'd want to share for anyone could have my problem. I suggest to check out this link https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/, where they talk about code splitting.
I think this could be the best approach, mostly because even in vue's documentation talks about(detail here https://v2.vuejs.org/v2/guide/components.html#Async-Components).
My bad for haven't checked in detail documentations.
It's good to bundle js code in a single file because it's going to be downloaded only one time by the browser and cached.
JavaScript code is not that that big so don't bother yourself with it.
I agree with Marcin's answer, but if you are wanting a workaround, comment out Laravel's built in Vue registration in app.js and just use a cdn in your blade files.
You may add multiple app.js (including multiple router, vuex if needed).
Entry them separately on webpack.mix.js.
And then include suitable app.js file as needed in the blade file.
It's much easier I think if you don't want share some .js code with any user who will not use those component ever.
NB: Of course lazy loading is a solution, but that this is more convenient solution to me as I'll not deliver any component to the user who don't need it.