@@ -96,7 +96,7 @@ export const SingleSelect = () => {
9696 < Title > Single-Select</ Title >
9797 < Hr />
9898 < Paragraph >
99- In this story' s source code, notice that the callback function
99+ In this story' s source code, notice that the callback function
100100 properties < code > getOptionValue</ code > and < code > getOptionLabel</ code > are
101101 wrapped in a < code > useCallback</ code > . While not required, < em > strongly prefer </ em >
102102 memoization of any callback function property whenever possible. This will boost
@@ -267,7 +267,7 @@ export const MultiSelect = () => {
267267 />
268268 </ SelectContainer >
269269 < SelectContainer >
270- < Label > Custom " renderMultiOptions" </ Label >
270+ < Label > Custom " renderMultiOptions" </ Label >
271271 < Select
272272 isMulti
273273 isClearable
@@ -322,9 +322,9 @@ export const Styling = () => {
322322 < Content >
323323 react-functional-select uses < PackageLink { ...STYLED_COMPONENTS_PACKAGE } /> to
324324 handle its styling. The root node is wrapped in
325- styled-component' s < code > ThemeProvider</ code > wrapper component which gives all
326- child styled-components access to the provided theme via React' s context API.
327- To override react-functional-select' s default theme, pass an object to
325+ styled-component' s < code > ThemeProvider</ code > wrapper component which gives all
326+ child styled-components access to the provided theme via React' s context API.
327+ To override react-functional-select' s default theme, pass an object to
328328 the < code > themeConfig</ code > property - any matching properties will replace
329329 those in the default theme.
330330 </ Content >
@@ -455,7 +455,7 @@ export const Events = () => {
455455 </ Li >
456456 < Li >
457457 < TextHeader > onInputChange(value: string) { '=>' } void</ TextHeader > -
458- executed after the input control' s value changes
458+ executed after the input control' s value changes
459459 </ Li >
460460 < Li >
461461 < TextHeader > onInputBlur(e: FocusEvent{ '<' } HTMLInputElement{ '>' } ) { '=>' } void</ TextHeader > -
@@ -642,14 +642,14 @@ export const Filtering = () => {
642642 ignores accents when matching strings. Default value is < em > false</ em > .
643643 </ Li >
644644 < Li >
645- < TextHeader > filterMatchFrom?: ' any' | ' start' </ TextHeader > -
646- Position in source string to perform match. Default value is < em > ' any' </ em > .
645+ < TextHeader > filterMatchFrom?: ' any' | ' start' </ TextHeader > -
646+ Position in source string to perform match. Default value is < em > ' any' </ em > .
647647 </ Li >
648648 < Li >
649649 < TextHeader > getFilterOptionString(option: MenuOption) { '=>' } string</ TextHeader > -
650650 When defined will take each option and generate a string used in
651651 the filtering process. By default, the stringified version of what is
652- generated by < code > getOptionLabel</ code > , if definded, or the option' s label
652+ generated by < code > getOptionLabel</ code > , if definded, or the option' s label
653653 as a fallback. The < code > MenuOption</ code > typed parameter
654654 that < code > getFilterOptionString</ code > accepts contains a < code > data</ code > property
655655 that represents the objects that comprise your < code > options</ code > property.
@@ -730,9 +730,9 @@ export const Virtualization = () => {
730730 of nodes), list virtualization can also assist with:
731731 < List >
732732 < Li >
733- < strong > Efficient memory allocation</ strong > . ' Windowing' naturally
733+ < strong > Efficient memory allocation</ strong > .' Windowing' naturally
734734 lends itself to the dynamic generation of attributes/values as each
735- object comes into your renderer' s scope (as opposed to allocating
735+ object comes into your renderer' s scope (as opposed to allocating
736736 this data upfront for each object in your list). This way you can
737737 perform this work just when you absolutely need to and then can
738738 immediately release it for the GC to cleanup. As an example I am
@@ -744,7 +744,7 @@ export const Virtualization = () => {
744744 < Li >
745745 < strong > Functional architecture</ strong > . The flexibility provided
746746 through only having to manage subsets of your list allows for a more
747- dynamic application. By breaking your code out into smaller, ' pure'
747+ dynamic application. By breaking your code out into smaller, ' pure'
748748 child components, you can write code that scales well and becomes
749749 open to performance optimizations - most notably, memoization.
750750 Simple components that rely on the props passed to it (rather than
@@ -830,8 +830,8 @@ export const Advanced = () => {
830830 < Li >
831831 < TextHeader > renderOptionLabel(option: any) { '=>' } ReactNode</ TextHeader > - Callback
832832 function with a return type of < code > ReactNode</ code > . Use this property in cases
833- where the standard < code > getOptionLabel</ code > property won't meet your needs (for
834- instance, you want to render each option' s label using custom JSX). More complex
833+ where the standard < code > getOptionLabel</ code > property will not meet your needs (for
834+ instance, you want to render each option' s label using custom JSX). More complex
835835 option labels will likely equate to longer render durations - this can translate
836836 into a flash of empty space when a user first starts scrolling. In order to prevent
837837 this, the < code > menuOverscanCount</ code > property can be increased to render additional
@@ -969,10 +969,10 @@ export const Async = () => {
969969 < List >
970970 < Li >
971971 < TextHeader > onInputChange(value: string) { '=>' } void</ TextHeader > -
972- callback executed directly following the input control' s < code > onChange</ code > event.
972+ callback executed directly following the input control' s < code > onChange</ code > event.
973973 This callback is not debounced, so it fires immediately. This is a good
974974 place to set a stateful loading property in your parent component that is mapped to
975- react-functional-select' s < code > isLoading</ code > property.
975+ react-functional-select' s < code > isLoading</ code > property.
976976 </ Li >
977977 < Li >
978978 < TextHeader > onSearchChange(value: string) { '=>' } void</ TextHeader > -
@@ -991,7 +991,7 @@ export const Async = () => {
991991 < TextHeader > isLoading?: boolean</ TextHeader > - When true, a loading animation will
992992 appear in the far-right of the control and take the place of the clear icon (if shown).
993993 Additionally, it will hide options in the menu and instead, display a loading message.
994- The loading message text defaults to ' Loading...' , but can be overriden via
994+ The loading message text defaults to ' Loading...' , but can be overriden via
995995 the < code > loadingMsg</ code > property.
996996 </ Li >
997997 </ List >
0 commit comments