DEV Community: rabbitzzc

useEnterCallback

rabbitzzc — Mon, 11 Sep 2023 07:49:51 +0000

import React, { useEffect, useRef } from 'react';

const useEnterCallback = (callback) => {
  const inputRef = useRef(null);

  useEffect(() => {
    const handleKeyPress = (event) => {
      // deprecated keyCode =  13
      if (event.key === 'Enter' || event.code === 'Enter') {
        callback(inputRef.current.value);
      }
    };

    inputRef.current.addEventListener('keydown', handleKeyPress);

    return () => {
      inputRef.current.removeEventListener('keydown', handleKeyPress);
    };
  }, [callback]);

  return inputRef;
};

const MyComponent = () => {
  const inputRef = useEnterCallback((value) => {
    console.log('Enter pressed! Value:', value);
  });

  return <input ref={inputRef} />;
};

A draggable Orientation component

rabbitzzc — Tue, 05 Sep 2023 01:29:27 +0000

A draggable DOM component that simulates Orientation, similar to the browser devtools, and matches the behavior of the browser devtools.

https://github.com/Rabbitzzc/sensors-orientation

css discuss

rabbitzzc — Sat, 08 Oct 2022 09:34:19 +0000

When the height is less than the height of the parent class, it is centered vertically. When the height is greater than the height of the parent class, scrolling from above can be done with css

How to do that

tiny-replace-files

rabbitzzc — Wed, 05 Jan 2022 08:43:48 +0000

recommend: https://github.com/Rabbitzzc/tiny-replace-files

import { replaceStringInFilesSync } from 'tiny-replace-files'

const options = {
  files: 'src/targets/index.js',
  from: 'test-plugin',
  to: 'self-name',
}

# await
const result = replaceStringInFilesSync(options)
console.info(result)
/**
[
  {
    file: './ques2.md',
    changed: true,
    matchCounts: 1,
    replaceCounts: 1
  }
]
*/

tiny-replace-files

rabbitzzc — Thu, 30 Dec 2021 07:28:01 +0000

🎉🎉🎉I code a pkg, like vcsode, string/texts can be replaced in file(s).

https://github.com/Rabbitzzc/tiny-replace-files

It's very lightweight and very simple, the project has just started. I hope we can build it together. Welcome star...

use -webkit-line-clamp by className & style in React

rabbitzzc — Thu, 08 Apr 2021 02:59:12 +0000

demp: https://codesandbox.io/s/clever-diffie-n0lq1?file=/src/App.js
style not works, but className can use.

webpack5 compiler.plugin

rabbitzzc — Sat, 06 Mar 2021 10:11:59 +0000

webpack5 has removed compiler.plugin.
So I want emit html-webpack-plugin 's html-webpack-plugin-before-html-processing, But I can't do this:

# it's wrong
compilation.plugin('html-webpack-plugin-before-html-processing', (htmlData, callback) => {
  // do something
}

What should I do?

🎉🎉step-tooltip update

rabbitzzc — Thu, 08 Oct 2020 14:39:58 +0000

git: https://github.com/Rabbitzzc/step-tooltip

The user experience is better with the added prominent identity

🔥🔥🔥 always-helper, useful functions

rabbitzzc — Mon, 28 Sep 2020 07:38:25 +0000

I am writing a git repository of some functions that are often used in business development.

I hope that some friends can build together to improve the front-end development efficiency.

Thanks.
https://github.com/Rabbitzzc/always-helper

GitHub to replace 'master' with 'main' starting next month

rabbitzzc — Thu, 24 Sep 2020 01:38:03 +0000

All new Git repositories on GitHub will be named "main" instead of "master" starting October 1, 2020.

Starting next month, all new source code repositories created on GitHub will be named "main" instead of "master" as part of the company's effort to remove unnecessary references to slavery and replace them with more inclusive terms.

🔥🔥🔥it's fast, it's easy~ step-tooltip

rabbitzzc — Tue, 22 Sep 2020 15:56:29 +0000

I wrote a tool function for the guide page to quickly create a boot flow.

🐛🐛🐛JS/TS npm templates

rabbitzzc — Wed, 16 Sep 2020 13:20:58 +0000

I wrote two templates, one is to build JavaScript and publish npm package, the other is to build TypeScript.

Copy the template, you can quickly create a package, no longer have to worry about annoying project configuration✨✨✨.

Please help check, if you can provide star✨✨✨, it will be more perfect.