CSS in JS is great, but how easy is it to handle pseudo-classes? React-dom-pseudo provides a react-motion-like component that conveniently provides csS-like pseudo-classes for react-DOM objects.

We first install with NPM:

$ npm install --save react-dom-pseudo
Copy the code

APIs

React-dom-pseudo supports the following pseudo-classes:

Props Simulation of pseudo class instructions The default value Must be
merge Whether to use style to merge with the styles of other states true no
disable Whether to cancel event listening false no
style The default styles undefined no
linkStyle :link The style before it is clicked undefined no
visitedStyle :visited The style that was clicked undefined no
focusStyle :focus The style of an element of type onFocus, such as input undefined no
hoverStyle :hover The style displayed when the mouse moves in undefined no
activeStyle :active Mouse or touch screen click style undefined no
disableStyle Style when canceling event listening undefined no
alwayStyle Merges with all styles and overrides duplicate style attributes undefined no

They will be returned based on the event triggered, and style combined, such as {… style, … ActiveStyle}, only existing styles will be merged

Combination rules for styles: {… style, … linkStyle, … eventStyle, … disableStyle, … alwayStyle}

use

import Pseudo from 'react-dom-pseudo';

export default() = > {return (
    <div>
      <div>example:</div>
      <Pseudo
        style={sheet.input}
        hoverStyle={sheet.inputHover}
        focusStyle={sheet.inputFocus}
      >
        {events => <input {. events} / >}
      </Pseudo>
    </div>); }; // CSS in js const sheet = {input: {fontSize: '14px', border: '1px solid rgba(0,0,0,0)', background: '# f3f3F3 ', // Enable transition: 'all 0.2s ease-out',}, inputHover: {background: '#f0f0f0',}, inputFocus: {border: '1 px solid rgba (0,0,0,0.1)', background: '# f0f0f3' transitionTimingFunction: 'ease - in',}};Copy the code

What does it do?

Pseudo’s renderProps contains the following events

  • OnClick: used to simulate :link and :visited pseudo-classes
  • OnFocus \Blur: Used to simulate :focus pseudo-class
  • OnMouseEnter \Leave: Used to simulate :hover pseudo-class
  • OnMouseDown \Up: used to simulate :active pseudo-class

If the project is running on mobile, it will put onMouse? Related events replaced with onTouch? To be compatible with mobile terminals

The way the renderProps are compared to if I just define oneInputWhat are the advantages of components?

Let’s see if we can directly define an Input component to emulate the hover pseudo-class

// The following code is written directly in Markdown, without being run, just to illustrate a point
class Input extend React.Component {
  state = {
    hover: false
  }
  handleMouseEnter = (a)= >{
    this.setState({ hover: true });
  }
  handleMouseLeave = (a)= >{
    this.setState({ hover: false });
  }
  render(){
    return <input style={this.state.hover? {... this.props.style, . this.props.hoverStyle}:this.props.style} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} />}}Copy the code

Then we use:

<Input style={inputStyle} hover={inputHoverStyle} />
Copy the code

It all looks good, but it’s not extensible, for example: if we need to add the above functionality to a div or SignButton, we need to write more than one component

Of course, we can also write a withHover component using HOC, but even then we need to create a new component before using it:

const SignButton = withHover(SignButton);
Copy the code

In contrast, the RenderProps approach is not as elegant:

<Pseudo style={inputStyle} hoverStyle={inputHoverStyle}>
  {events => <input {. events} / >}
</Pseudo>
<Pseudo style={inputStyle} hoverStyle={inputHoverStyle}>
  {events => <div {. events} / >}
</Pseudo>
<Pseudo style={inputStyle} hoverStyle={inputHoverStyle}>
  {events => <SignButton {. events} / >}
</Pseudo>
Copy the code

react-dom-pseudoCould it be more simplified?

Since it doesn’t make much sense to use childrenFuncion when the child object is a div or an array, we can shorten it to childrenFuncion:

<Pseudo style={inputStyle} hoverStyle={inputHoverStyle} /> <Pseudo style={inputStyle} hoverStyle={inputHoverStyle}> <p> Multiple child elements </p> <img SRC =" XXX "/> <div> Parent equivalent to a div</div> </Pseudo>Copy the code

How do I get hover, active, etc., and do events other than styles?

The second parameter to renderProps is the state inside Pseudo, which we can then use to do other events. In this example, we can modify the innerText of a div based on the hover state.

{hover, focus, active, visited}

<Pseudo style={inputStyle} hoverStyle={inputHoverStyle}> {(events, state) => { const mouseState = state.hover ? 'mouseIn' : 'mouseOut'; return <div {... events}>{mouseState}</div>; }} </Pseudo>Copy the code

How do I temporarily mask event listening?

Pseudo sets disable to true

<Pseudo disable />
Copy the code

How do I add styles on top of all state styles?

Pseudo has an alwayStyle property that eventually returns the style {… style, … otherStyle, … alwayStyle}

<Pseudo alwayStyle={style} />
Copy the code

Is CSS in JS easy to use?

Different from person to person, I think it is better than writing CSS and SASS for several reasons:

  1. Many animation libraries such asreact-motion.react-springAnd so on, will need to operate the style object, its style may exist in CSS and JS respectively, at this time, CSS in JS concise;
  2. CSS in JS allows component-related code to be closed in a single file. When we modify a component, we don’t need to switch files back and forth.
  3. If we have a larger project and need to shard modules, CSS in JS is better than traditional CSS files for shard components together.

How to solve some CSS in JS writing trouble?

  1. sassColor blending and other functions can be usedmix-colorLibraries such as easy to solve;
  2. sassYou can easily define one in CSS in JSglobalStylesObject reach;
  3. CSS pseudo-classes, previously written with the component state method is more troublesome, repetitive, can be usedreact-dom-pseudoTo solve.

react-dom-pseudosupportreact-native?

Because react-dom-pseudo uses ReactDOM events, it does not support React-native, so if you need to fork a DOM event to RN, you can use touchble events

Finally, thanks for reading 🙂

MIT License