I was wondering is there a way to use animation exported from spine into a react application?
If there is one, what process should I follow (If there is a documentation or anything that will help)
Thanks a lot!
It is not specific to React, I mean Spine generates 2D animations that can be used with multiple platforms and languages thanks to spine runtimes.
For example if you want to integrate the animation in your React app you can use the Typescript (it works with Javascript as well) runtime available here
There're multiple ways to do it, the one I prefer is using the canvas API
, you can find an example here
And it is as simple as using the canvas HTML tag wrapped in a React component, with this library react-canvas
One last point to highlight, if you are trying to use Spine for HTML element animation, it is not the proper tool for this, there're other libraries that are better for this type of use cases, like react-spring
Related
I'm developing a frontend application that must be responsive at least for desktop and mobile resolutions.
I'm wondering what's the recommended way to structure the codebase.
Searching online various solution I found:
using something like tailwind where in every tag I can specify some "responsive" class which activate only at specific breakpoints
using #media-queries
using libraries like react-responsive
Using approach 1) I feel like the component is very messy and difficult to read: every line, every tag could be rendered or not based on classes applied. Understand what is rendered desktop or mobile side is madness.
Approach 2) is pretty ok but you have the css outside of the component.
Probably it's right to have the css outside the component for someone but I think that react encourage to encapsulate even this kind of aspect inside the component, right?
Approach 3) is basically like the approach 2) but encapsulating it in the component.
What it's not clear to me is:
are these the only approaches that are recommended nowadays?
when using something like 1) or 3) should I create N different version of the same component, where N is the number of breakpoints that I should support? Or the component should be only one with conditional logic that use different styles based on the resolution?
Duplicate the components makes all more clearer to read but has the downside that maintain all these duplicates could be very difficult (every edit, every fix, should be copy-pasted in every component).
At the same time using only one component with "responsive classes" is harder to read even if you have the advantage to maintain only one class.
What do you think?
Thanks
I am using jointJS as a diagramming library. It creates nodes on a graph using svg elements.
I want to use react to render the content of those nodes, and since jointJS lets me configure what svg element i want it to use, all I have to do is
Configure jointJS so it knowns a node is a <foreignObject>
Retrieve that foreign object, and mount a react component inside of it using createPortal
Dynamically size the foreign object so it fits the react component.
It works fine, but I don't have enough experience with foreignObject to know if any caveats are to be expected.
Can anyone provide some feedback about their experience with such practices ?
Answering my own (old) question feels a bit like:
If you're reading this because you're faced with a similar issue, my advice is to avoid being in this situation in the first place.
Some standard CSS features will behave inconsistently, won't work at all, or will have very different outputs depending on the browser you're using.
If I remember correctly, transform and opacity are the two main problematic properties.
Also, animating those properties will rarely work at first try.
Perhaps this is such an edge case that browser bugs are not often found and reported. (and probably not prioritised).
We ended up developing a flowchart library that natively uses react to display nodes.
Cheers!!
I jumped into React recently, so I'm very confused about many things. One of them is about how most of people design UI in React.
Before jumping in, I used Bootstrap to design UI of my website by using pre-made components such as buttons, modal views, navigations, and so on. But, figured out I can't use it anymore in React, but I can use React-Bootstrap instead. Is React-Bootstrap still the most popular UI framework in React as well? I'm asking that because I found some other UI frameworks such as Semantic UI or Material UI for React.
Also, I found styled-components. However, styled-components makes me feel like I need to make every component by myself to use which sounds like taking too long time.
As a very beginner, I'm curious about how people usually work on UI in React?
Firstly, There is no clear answer for the problem. In general purpose of styled-components not mean don't use another ui framework. And the companies solve the problems which is spesific with their Engineering Team. They have their own architecture though. But the alone programmers are choose some open source solutions.
Well, Some people use together or alone. It's totally about your project or your style of architecture. But still i would say some stuffs for giving point of view.
In the other hand; the UI Frameworks are solve modular problems. An example: You cannot create a modal with only css even styled-components. you know, you need JavaScript for that.
To use both:
You can use on Elements Semantic-UI(ReactJS or direct element with the className),
You can use styled-components instead of css file for spesific part of your project. As e.g: Main, Aside, Article, Post, TopNavigation etc.
If you prefer to use the styled-components, also you can use same components in React Native. (There is no css file support for React Native. You'll need inline CSS)
To use only div instead of the spesific component, you'll confused after project being bigger. I would recommended you to create for each meaningful Element.
You can combine the open source community UI parts with your own CSS.
You won't need a CSS(Less, Sass) file when you use styled-components. That's mean, you'll work only on your JS files instead CSS files, so you can do dynamic things in your components. styled-components supports almost all CSS features.
To use standalone Semantic-UI:
I prefer Semantic-UI-React instead of ReactJS bootstrap frameworks.
You cannot use the CSS of Semantic-UI-React in React Native. You should choose which is another solution or actually make your own your components architecture.
You are ready to go with every project with Semantic-UI-React for web/mobile site.
You have to learn basics of less-lang.
You can change everything from your theme files which variables.
Lastly,
If you have big project or goal though; nevertheless, i think you should use a UI Framework in learning and adaptive process.
If you are still not sure what you should do you then, you have to try all of them to find your own architecture.
I think in learning process, you have to concern about ReactJS needs(Redux, Router etc.) before CSS.
It's my first answer at Stackoverflow. Hopefully, the answer will help you for your concern.
I've been developing web app using react or angular but I'm confused why people would use library like react-bootstrap (https://react-bootstrap.github.io/introduction.html) or Angular-bootstrap? Because when I create I just have to load the css framework using link tag with its corresponding js lib, then in reactjs side, I just have to put the classes needed for a component. Isn't that sounds easier?
Thanks,
It has to do with the Javascript portion of Bootstrap. The CSS will work just fine with a link tag.
But React and Angular are Javascript libraries which have a lot under the hood for manipulating the DOM. If you also use something like Bootstrap or jQuery to manipulate the DOM, it probably won't play well with React or Angular since they're trying to do similar things in very different ways maybe at the same time. So DOM-related Javascript libraries need to be rewritten so they play nicely with React/Angular.
From the react-bootstrap docs:
we don't ship with any included css
All they deal with is the JS.
When you chose to work with reactjs you chose a library that updates your DOM in a cleaver and sophisticate way.
It has the virtual DOM and bunch of algorithms (like the Diffing algorithm) to determine when and how to update the DOM in the most fast and efficient and performant way.
When you combine this with another library that updates the DOM, you basically interrupt those algorithms to do their job.
Beside performance aspects, you are working against the pattern of react, you break the "component pattern".
React-Bootstrap is here to help you maintain your component pattern with their components. you just need to include the css and other resource files.
Their components doesn't do anything beside rendering HTML with proper class names that correspond to the classes that in the bootstrap's css files.
They do that in the same way all your other components do it, via props.
This way you can have a bootstrap components that play nice with your other components in a native way without breaking the pattern.
Yeah, it's easier to dump some css and js files and things just works, but it's harder to maintain, debug and scale.
I'm pretty new to development. Right now working on an webapp in my freetime.
Backend will be written in Python (here I have the best experience).
How good is the Idea to mixing React components:
like: https://github.com/brillout/awesome-react-components
My Idea was to use these components or let others create components for me (for example a slide show or whatever)
The question is, is this a good Idea? I'm worry that this might create a lot of overhead. For example one component is based on bootstrap and the other on foundation (As I said I'm not experienced web developer and can't judge if this can actualy really happen).
Thanks!
The idea of React components is to have the smallest piece of code you can define.
However, mixing different CSS frameworks, like Bootstrap or Foundation doesn't sound like the best idea. You can, of course mix ready-made components (like React-Bootstrap) with your own custom components, but ideally you would choose one framework and stick with it.
The good thing about React is that you can possibly switch between Frameworks without the need of refactoring everything.
Let's say, for instance, you have a custom component called Slider. If you later decide to use MaterialUI, depending on your configurations, you could just change the import from import Slider from "./Slider" to import Slider from "material-ui/Slider" and the rest of your code would be untouched.
Pick a CSS / UI framework and stick with it. These days I have been working with Semantic UI and they have good integration with React via http://react.semantic-ui.com/
It is awesome! :)
And in addition to that, you can also build your own custom components.
If you think adding a whole framework to your project is a lot of burden, then you can make everything your own from scratch. (Either (1) using the CSS framework classes for the components or (2) defining your own CSS classes)
And to conclude I also agree to not mix CSS frameworks as there might be conflicts! It's not fun! In my project, Bootstrap was conflicting with Semantic UI, so I just stuck with the latter.