FE Toolkit

Front-end development toolkit.

My other user code snippet plugin: Big Lvan

Big lvan

React Keys

Prefix	Method
hus , useState	const [state, setState] = useState(initialState)
huc , useContext	const context = useContext(initialContext)
hur , useRef	const refContainer = useRef(initialRef)

hue , useEffect

useEffect(() => {
  componentDidMount || componentDidUpdate;

  return () => {
    componentWillUnmount;
  };
}, [input]);

hucb , useCallback

const memoizedCallback = useCallback(() => {
  // doSomething(a, b);
}, [a, b]);

hum , useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

hurd , useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init);

huih , useImperativeHandle

useImperativeHandle(ref, createHandle, [deps]);

ifc , internalFunctionComponent

const  = ({
  className = '',
  // props,
}) => {
  // TODO

  return // TODO
}

fc , functionComponent

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import cs from 'classnames';
import styles from './.scss';

const  = ({
  className = '',
  // props,
}) => {
  // TODO

  return // TODO
}

export default withStyles(styles)();

cc , classComponent

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import cs from 'classnames';
import styles from './.scss';

class  extends Component {
  static propTypes = {
    // propName: PropTypes.string,
  }

  static defaultProps = {
    // propName: "",
  }

  state = {
    // stateName: "",
  }

  render() {
    const { propName } = this.props;
    const { stateName } = this.state;

    return (
      // TODO
    )
  }
}

export default withStyles(styles)();

ccsp

static propTypes = {
  : PropTypes.string,
}

ccsd , defaultProps

static defaultProps = {
  : PropTypes.string,
}

state

state = {};

cchf , classHandleFunction

handle = ({}) => {};

fchf , functionHandleFunction

const handle = () => {};

tp

const {} = this.props;

ts

const {} = this.state;

ir , imp , import

import React from "react";

imws , importwithStyles

import withStyles from "isomorphic-style-loader/lib/withStyles";

imcn , importclassnames

import cs from "classnames";

ed , exp , export

export default ;

ec , expc , exportc

export const  = () => ;

cin , consoleinfo

console.info("msg: ", subst);

clo , consolelog

console.log("msg: ", subst);

cer , consoleerror

console.error("msg: ", subst);

cdi , consoledir

console.dir(obj);

cta , consoletable

console.table(data, columns);

cti , consoletime

console.time(label);

cte , consoletimeend

console.timeEnd(label);

ctl , consoletimeLog

console.timeLog(label);

cwa , consolewarn

console.warn("msg: ", subst);

ccl , consoleclear

console.clear();

cco , consolecount

console.count(label);

cmmf , commentsfunctions

/**
 * 用一句话介绍此函数是干嘛用的。
 *
 * @param {string} employee - 参数的介绍文字
 * @return {string} 函数返回的数据
 *
 * @example
 *
 *     const xx = foo('hello')
 */

Style keys

fl

font-size: 16px;
line-height: 24px;

wh

width: 1280px;
height: 344px;

te

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;

tem

position: relative;
line-height: 24px;
height: 48px;
font-size: 16px;
overflow: hidden;
display: block;
width: 100%;

&:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
  height: 24px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffff 50%);
}

temw

overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

hvc

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);