NeetoUtils

NeetoUtils is a utilities library that drives the experience in all Neeto products built at BigBinary.

Installation

yarn add https://github.com/bigbinary/neeto-utils

Development

Install all the dependencies by executing following command.

yarn

You can create new components in the lib/components and export them from lib/index.js.

Running the yarn start command starts a CRA app which resides in example folder. Use this application to test out changes. Note that nothing in the src folder will be bundled with NeetoEditor.

Building

Running the yarn build command build a production bundle file.

Available utilities

Utils

Slugify

const Slugify = string => {
  return string
    .toString()
    .toLowerCase()
    .replace(/\s+/g, "-") // Replace spaces with -
    .replace(/&/g, "-and-") // Replace & with 'and'
    .replace(/[^\w\-]+/g, "") // Remove all non-word characters
    .replace(/\-\-+/g, "-") // Replace multiple - with single -
    .replace(/^-+/, "") // Trim - from start of text
    .replace(/-+$/, ""); // Trim - from end of text
};

Truncate

const truncate = (text = "", maxLength = 30) =>
  text.length > maxLength ? text.slice(0, maxLength - 3) + "..." : text;

Hooks

useDebounce

const useDebounce = (value, delay = 800) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value]);

  return debouncedValue;
};

useOnClickOutside

const useOnClickOutside = (ref, handler) => {
  useEffect(() => {
    const listener = (event) => {
      // Do nothing if clicking ref's element or descendent elements
      if (!ref.current || ref.current.contains(event.target)) {
        return;
      }
      handler(event);
    };
    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);
    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [ref, handler]);
};

useLocalStorage

useLocalStorage is a custom react hook used to read and write a specific field in application's localstorage.

const [localStorageValue, setLocalStorageValue] = useLocalStorage(
  "useLocalStorage",
  "BigBinary"
);
return (
  <input
    placeholder="Enter value"
    value={localStorageValue}
    onChange={(e) => setLocalStorageValue(e.target.value)}
  />
);

useAxios

useAxios is a custom react hook used to perform API requests. It helps reduce the duplication of the same code in the same file and across multiple files in a project.

const {
		request: createPost,
		apiResponse: { data: id },
		error: createError,
		isLoading: createLoading,
	} = useAxios(
		{
			method: "POST" // Any valid HTTP methid ,
			url: "https://jsonplaceholder.typicode.com/posts" // A valid API endpoint,
      headers: "" // Valid HTTP headers
		},
		""
	);