React-Styled-Floating-Label
Floating label component which works with any HTML input. Supports styling with styled-components. Check this live demo to see it in action.
import FloatingLabel from 'react-styled-floating-label'; const email = <FloatingLabel ="Email"> <input ="email" /> </FloatingLabel>;
Installation
npm i react-styled-floating-label styled-components --save
Usage
Typical Usage Example
import styled from 'styled-components';import FloatingLabel from 'react-styled-floating-label'; const BlueFloatingLabel = ` color: #0070e0;`; const Input = styledinput` -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; border: none; border-bottom: 0.5px solid #bdbdbd; font-size: 1.25em; padding-left: 0.25em; padding-top: 0.25em; min-width: 20em; :focus { border-color: #5eaefe; outline: none; }`; const email = <BlueFloatingLabel ="Email"> <Input ="email" /> </BlueFloatingLabel>;
Styling With Props
import FloatingLabel from 'react-styled-floating-label'; const address = <FloatingLabel ="Address" = => <Input /> </FloatingLabel>;
Styled Placeholder
import styled from 'styled-components';import FloatingLabel from 'react-styled-floating-label'; const FloatingLabelWithStyledPlaceholder = ` --placeholder-color: #328a09; --placeholder-font-weight: bold;`; const Input = styledinput` font-size: 1em;`; const address = <FloatingLabelWithStyledPlaceholder ="Address"> <Input /> </FloatingLabelWithStyledPlaceholder>;
Custom Positioning
import styled from 'styled-components';import FloatingLabel from 'react-styled-floating-label'; const VerticallyPositionedFloatingLabel = ` transform: translateY(-10px);`; const HorizontallyPositionedFloatingLabel = ` margin-left: 20px;`; const firstName = <VerticallyPositionedFloatingLabel ="First Name"> <Input /> </VerticallyPositionedFloatingLabel>; const lastName = <HorizontallyPositionedFloatingLabel ="Last Name"> <Input /> </HorizontallyPositionedFloatingLabel>;
You can check all examples in action in this live demo.
API
Props
Prop | Required | Default | Description |
---|---|---|---|
text | Yes | Label text | |
style | Optional | {} |
Label style for projects which are not using styled-components |
placeholderStyle | Optional | {} |
Placeholder style for projects which are not using styled-components |
container | Optional | div |
Component container |
label | Optional | label |
Label component |
styled-components
Label can be styled with styled-components:
import styled from 'styled-components';import FloatingLabel from 'react-styled-floating-label'; const BlueFloatingLabel = ` color: #0070e0;`;
To style placeholder use standard CSS properties with the "--placeholder-" prefix:
const BlueFloatingLabelWithBoldPlaceholder = ` --placeholder-font-weight: bold;`;
Demo
To run the demo, you need to clone the project and execute:
npm i && npm run demo
Or you can check a live demo here.
Feedback
There are no mailing lists or discussion groups yet. Please use GitHub issues and pull request or follow me on Twitter @IhorBurlachenko