I have a TextField component for template. now I want to use it in other components and can change style of template in that components
in this project I use functional component and react-redux
Why does Flatpickr component from react-flatpickr does not render at all?
I created a React component that renders the <Flatpickr /> component with some additional options. The component is rendered but the<Flatpickr /> does not render at all. When using the <Flatpickr /> component in another file it works.
Answering my own question in case someone has the same issue:
Make sure you import correctly
import Flatpickr from 'react-flatpickr'
from react-flatpickr and not flatpickr.
I have react component <MyComponent text="Hello">.
I'm adding this component from the Froala toolbar .
How to make react pickup this element/component and render it properly?
I am rendreing the DOM element, which get data from the local state. With the press of a button, state changes with this.setState({}) and DOM element re-renders it. How to animate that change of state?
Git: https://github.com/TyroniUA/v.rudovtsymbalist-gmail.com
<StepsCard number='01'
id='number-one'
numberbckg='#00A9E7'
h2width={this.state.h2width[0].one}
h2={this.state.displayText[0].title}
p={this.state.displayText[0].text} />
<StepsCard
number='02'
id='number-two'
numberbckg='#B9D67B'
h2width={this.state.h2width[0].two}
h2={this.state.displayText[1].title}
p={this.state.displayText[1].text} />
You can use react-transition-group package for that.
just import TransictionGroup and CSSTransition from that component and wrap your JSX you need to animate. It requires a key on basis of which you need to animate, that is some state in your case.
import { CSSTransition, TransitionGroup } from 'react-transition-group';
<TransitionGroup>
<CSSTransition key={this.state.value} timeout={1000} classNames="messageout">
<YOURJSX/>
</CSSTransition>
</TransitionGroup>
Here is an example of it: https://codesandbox.io/s/nice-dubinsky-zmwpu
I've was testing the react-sketchapp which looks pretty neat so far.
Besides rendering the default sketch elements like Text,View,Image and so on, would it be possible to render a default react component containing HTML-Markup styled with scss?
I tried rendering the following Hello-Component:
import React from 'react';
import { render, Artboard, Text, View } from 'react-sketchapp';
const Hello = () => (
<View
name={`Hello View`}
>
<Text name="Hello Text">
<span>Hello World</span>
</Text>
</View>
);
const Document = () => (
<Artboard
name="Hello Board"
>
<Hello />
</Artboard>
);
export default (context) => {
render(<Document />, context.document.currentPage());
}
but I get the following error:
Could not find renderer for type 'span' flexToSketchJSON
Is rendering default react components including html / css to Sketch possible?
You can't render HTML elements to Sketch, same as you can't render HTML elements to React Native.
React is just a way of managing a tree of abstract components. How to render these components needs to be defined by the specific renderer you are using. react-sketchapp is a renderer that understands components which render to Sketch elements, but it does not understand HTML elements such as div. (and React Native includes a renderer which knows how to render React Native components to native mobile views, react-music is a renderer which knows how to render React Music components into audio, and so forth).
React, in and of itself, has nothing to do with HTML elements or the DOM. The react-dom renderer library is where the magic of rendering into the DOM happens. If you want to render HTML elements to Sketch, you'll need to write a React renderer which knows how to convert HTML elements to Sketch's file format.
You can export any HTML/CSS to Sketch using html-sketchapp.
It is possible.
Try looking into using React-Primitives with React-SketchApp.
https://github.com/lelandrichardson/react-primitives
It's in a few examples within React-SketchApp e.g.
https://github.com/airbnb/react-sketchapp/tree/master/examples/profile-cards-primitives