Sketch component for React - javascript

Is there any sketchJS components for React?
I'm trying to find a sketch/canvas area component where the user can draw something and submit the result into a base64 field as in png/jpeg mime type. SketchJS does it but I was wondering whether there is any pure react component that does the trick?
I'm new with Javascript/React and I see that sketch uses JQuery, is there any other alternative, because I do not want to add JQuery inside my project?

Related

Is it possible to convert html homepage to a react component to render in Index.js Create-React-App

I have an existing templated website that i want to continue with react. I decided to use create-react-app for that, but i do not know how to move the html based template to the react application. What i am trying to do now is to find a way to create a functional component out of the html file and then pass it to the index.js file for rendering. What i don't know is if this will work. Any ideas on the best way to do this?
There have tiny changes with HTML and JSX. JSX use className instead of class and htmlFor instead of for as mentioned up there.
If you are using VS code editor, here are your steps to make things a bit easier:-
In Vs code, Download an extension name HTML to JSX.
open your raw HTML code with VS code.
Select all code you want to convert.
Right-click and see at the bottom of the list, you will see an option Convert HTML to JSX. Click it and you are done.
step:1
step:2
result
Yes it is, and JSX was designed to be very similar to HTML to allow just that sort of thing.
However, JSX does have a few differences from HTML, which you'll want to read about. For instance, certain HTML attributes "overlap" with JS keywords, so in JSX you should use (for instance) htmlFor instead of for, and className instead of class. Also every tag has to be closed (as in XHTML).
Once you get your initial HTML into your Javascript file, you'll then want to start breaking up the parts of that page into separate React components, so that you can focus on them (and their logic) in independent chunks.

Passing data to React component through Laravel blade

I don't know if this is even possible or maybe this is just a stupid question, but here it goes:
Is it possible to pass data from you Laravel controller to a React Component through a blade template?
I'm asking this because I have a form where I have three static form elements (name, description & deadline) that are defined in blade and a dynamic part that adds elements (extra fields; name, description and type for each extra field) to the form on a button click.
I also want to use the component for editing, so I need to push data into it. My train of thought was to use React for the dynamic part so that I don't have to use native JS or jQuery to build this.
Note that I'm a beginner at React so I this point I don't even know if I'm doing it right/wrong. I've added a screenshot of the form to show illustrate what I mean. (sorry it's in Dutch but I've tried to add some notes to make it clear)
This maybe will help you out:
under Rendering json ..
This is how vuejs works. Your controller would return a variable like $project and you would pass it as a prop into your component by using #json($project)

How to deal with components inside dynamic html strings in Sapper & Svelte?

I am trying to make my first Sapper site and I'm populating the content similarly to how it's done in the template here.
My problem is that I want to allow usage of custom components in the content of {#html post.html}. Currently it doesn't work, the HTML is just inserted there without being treated like a component, even if I import the component in [slug].html and it works if used directly somewhere besides that {#html post.html}.
The behaviour is kind of expected as the content is fetched after svelte has finished it's work, but I am not sure what should I do then. I want a couple of custom components like <FancyButton> to be usable in the user generated content.
Can I ask the [slug].html component to look at the post.html or just whole content after insertion and create an instance of child component wherever it should be? Or should I somehow compile the string beforehand on the server?

SliderIOS – custom moveable image

I'm using react-native and for a component I need to replace the default image of the SliderIOS component with a custom one. Is there any way of accomplishing this or should I create a custom slider component? (I don't have any experience in this.)
I have already tried embedding an image as a child of the slider as well as the vice-versa approach, however non of them have worked.
Looking at the source code for RCTSliderManager, we can see that it only exposes value, maximumValue, minimumValue, minimumTrackTintColor and maximumTrackTintColor. That means like it looks like you're out of luck. You could use the RCTSlider and RCTSliderManager files as a starting point for a custom component, or you could create a pull request to expose setThumbImage on UISlider.
I have created a pull request fixing this issue which hopefully gets accepted.

Adding content to react elements

I am new to react.js and I have heard that this js library reacts badly to anything that modifies it's component structure.
Is there any specific procedure to add content into react elements using Jquery. For example, if we want to add content into react's div field, can we directly use Jquery append method to insert text to that div or is there any other way to implement things?.
The idea is that you either use a traditional approach, or you ditch jQuery and use react and this means using the react rendering tree, probably build tasks, client-side router/SPA.
You should not modify the DOM generated by react components from outside it since it maintains an internal state and a virtual DOM that would become out of sync. You either use one ecosystem or another; they are two very different approaches to writing a website.
If you want to introduce react on a small part of the website first, I would suggest to gather all your data with jquery and then transmit the data into the react component.
Roughly
// gather data with jquery or whatever
var data_array = gatherData();
ReactDOM.render(<MyCustomComponent data={data_array}/>, $('#my-react-root')[0])
Rendering changes during runtime can be managed the same way. Just gather the data again and change the state of the react component accordingly.
If you don't want to extract the data or the html is to complex, you can use dangerouslySetInnerHTML to just path a plain text html string.
From the docs:
<div dangerouslySetInnerHTML={{__html: getMarkup()}} />
Best wishes
Andreas

Categories

Resources