Chris Sandvik csandman

Chakra React Select

UPDATE: I finally made an NPM package for this component! It is made with TypeScript, and now has a fully customizable styling system. It is also far ahead of this wrapper at this point. Check it out here if you'd like: https://github.com/csandman/chakra-react-select

In order to use this component, you can implement it and use it like you would normally use react-select. It should accept all of the props that the original takes, however customizing the theme or the components could break this implementation. There are also a few extra things you can do with this wrapper that pull from the chakra library.

You can pass the size prop with either sm, md, or lg. These will reflect the sizes available on the Chakra <Input /> component (with the exception of xs because it's too small to work).
In your options objects, you can add the key isFixed to emulate the exa

	import { forwardRef, useCallback, useRef } from 'react';
	import { SeatsioSeatingChart } from '@seatsio/seatsio-react';
	import type {
	BookableObject,
	Category,
	ChartRendererCallbacks,
	ChartRendererConfigOptions,
	EventManager,
	HoldToken,
	Region,

	import { transform } from "@svgr/core";
	import { readdir, readFile, writeFile, mkdir } from "fs/promises";
	import path from "path";
	import { rimraf } from "rimraf";
	import prettier from "prettier";

	const defaultProps = `/** These can be modified to change the default props for all icons */
	const defaultProps: IconProps = {
	stroke: "currentColor",
	strokeLinecap: "round",

	/* eslint-disable @typescript-eslint/no-explicit-any */
	type Primitive = null \| undefined \| string \| number \| boolean \| symbol \| bigint;

	/**
	* Checks whether T1 can be exactly (mutually) assigned to T2
	* @typeParam T1 - type to check
	* @typeParam T2 - type to check against
	* ```
	* IsEqual<string, string> = true
	* IsEqual<'foo', 'foo'> = true

	import { URLSearchParams } from "url";

	/**
	* Check whether a URL string is in a proper format
	*
	* @param {string} str A URL string to check for the correct structure
	* @returns
	*/
	const isUrl = (str) => {
	if (typeof str !== "string") {

	/**
	* Stringify an object containing query parameters to be used in a request
	*
	* @param {object} paramObj An object containing query paramaters
	* @returns {string} A string in the format of a query param
	*/
	export const stringifyQuery = (paramObj) =>
	new URLSearchParams(paramObj).toString();

	/**

	// milliseconds in 1 second
	export const MS_IN_S = 1000;
	// seconds in 1 minute
	export const S_IN_M = 60;
	// minutes in 1 hour
	export const M_IN_H = 60;
	// hours in 1 day
	export const H_IN_D = 24;
	// days in 1 year
	export const D_IN_Y = 365;

	// originally from: https://github.com/vercel/swr/issues/110#issuecomment-552637429
	import useSWR from 'swr';
	import useDebounce from 'hooks/use-debounce';

	const App = () => {
	const [search, setSearch] = useState('');
	const debouncedSearch = useDebounce(search, 1000);
	const { data: res, isValidating } = useSWR(
	() => debouncedSearch ? `/api/suggestion?value=${debouncedSearch}` : null,
	Api.fetcher,

	-- Written for TSQL
	CREATE FUNCTION dbo.CompareEmails(
	@Email1 AS NVARCHAR(MAX) = '',
	@Email2 AS NVARCHAR(MAX) = ''
	)
	RETURNS BIT
	AS
	BEGIN
	-- Basic check to see if each string is an email
	IF LEN(@Email1) = 0