score:2
following this comment on a similar issue on github, i was able to get it to work! in my case, i'm using styled-component
but it should work regardless of the styling used
import react from "react";
import styled from "styled-components";
import { components } from "react-select";
export const control = (props: any) => {
return (
<>
<label isfloating={props.isfocused || props.hasvalue}>select</label>
<components.control {...props} />
</>
);
};
const label = styled.label<{ isfloating?: boolean }>`
left: 10px;
pointer-events: none;
position: absolute;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
z-index: 1;
top: ${(props) => (props.isfloating ? `5px` : `35%`)};
font-size: ${(props) => (props.isfloating ? `0.5rem` : `1rem`)};
`;
you can add your custom control component to select:
<select
...
components={{ control }}
placeholder=""
/>
note: you must ensure your select component doesn't have an empty default value otherwise, hasvalue
will always be true
Source: stackoverflow.com
Related Query
- How can I add floating label to react-select?
- How can we add label to react phone input 2
- How can I make React select component auto matically set to accomodate label width?
- How can I add multiple className's to react component?
- How can I add onKeyPress event to react material-ui textfield?
- How can I add a click handler to BODY from within a React component?
- How can I add properties to a react component passed as a variable?
- How can I add an icon to Material UI Select options?
- How can I add my rails devise login/signup to a React Native app?
- How can I add a Placeholder in a React CKEDITOR
- How to add floating action button on the right-bottom side of the screen using material ui in react
- How to add floating button in react native?
- How can I add computed state to graph objects in React Apollo?
- How can I style the arrow of react select component?
- how to test radio button in react testing library(User can select other radio button)
- React Material-UI How can I add a checkbox which is separate from table row click
- how can i add key to my div tag in React with Promises
- How can I add a scale on react leaflet?
- How to add the input field inside the select option using ant design and react
- How can I add multiple path for home page with react router dom 6?
- How can i add conditional rendering to a button in react
- How can I add html Element Attributes in react
- How can I add custom props to an Option using React Select?
- How can I add the item to cart page in react
- How can I add icon to react ag-grid rows?
- How can I handle the multiple select box in react in a single state
- How can I access the custom target attribute within material UI select options in React js
- how to add title in react select option value <Div> tag
- How Can i Add Event Handlers In Reusable React Component Created from Object Array
- Material React Select Multiple: How i can remove from my array when i click in a selected element?
More Query from same tag
- Recommended way to have drawer resizable?
- ReactJS and DraftJS, how to change font size on the fly?
- Keep initial route active in nested route - React Router
- How can I convert React Element to Html element?
- Using useRef hook, modify CSS style for a react component
- Exchange data between components
- How to read a react file ( ES6 with jsx) with node in order to get the export variable
- Windows 10 -> 'npx create-react-app myapp' command does not work because of whitespace username in file path
- redux-thunk structure and test side effects
- Parent component unnecessarily re-rendering child on parent state change
- Passing down use state values gives undefined
- React call bootstrap function?
- React useFetch hook + onclick / event
- How do I use grid-template-areas in styled-components with react?
- Receiving data from MongoDb using React
- Flex box 3 column layout with sticky footer
- React Testing Library: Unable to Select Material UI DatePicker Button
- Making an axios get request and using React useState but when logging the data it still shows null
- How to style in MUI-Datatables the filter chip on top of the table
- How to display a button only if text overflows
- CSS styles are not being applied to React file
- React.js: Set innerHTML vs dangerouslySetInnerHTML
- How to style react autocomplete input box?
- Typescript/React: How can a ref be added to a material-ui Box component?
- Recalculating after multiple Flux state update
- Changing material UI button text based on a condition
- Why do I get this error when wanting to use router useNavigate
- How do you add an annotation to a website without altering the layout?
- onDrag event clientX is always 0 in Firefox
- In React, can I define a functional component within the body of another functional component?