Floating label component which works with any HTML input
npm install react-styled-floating-labelReact-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.
``jsx
import FloatingLabel from 'react-styled-floating-label';
const email = (
);
`
Installation
============
npm i react-styled-floating-label styled-components --save
Usage
=====
`jsx
import styled from 'styled-components';
import FloatingLabel from 'react-styled-floating-label';
const BlueFloatingLabel = styled(FloatingLabel)
color: #0070e0;;
const Input = styled.input
-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 = (
);
`
!Typical Usage Screen Recording
`jsx
import FloatingLabel from 'react-styled-floating-label';
const address = (
style={{
color: '#0070e0',
}}
placeholderStyle={{
fontWeight: 'bold',
}}>
);
`
!Styling With Props Screen Recording
`jsx
import styled from 'styled-components';
import FloatingLabel from 'react-styled-floating-label';
const FloatingLabelWithStyledPlaceholder = styled(FloatingLabel)
--placeholder-color: #328a09;
--placeholder-font-weight: bold;;
const Input = styled.input
font-size: 1em;;
const address = (
);
`
!Styled Placeholder Screen Recording
`jsx
import styled from 'styled-components';
import FloatingLabel from 'react-styled-floating-label';
const VerticallyPositionedFloatingLabel = styled(FloatingLabel)
transform: translateY(-10px);;
const HorizontallyPositionedFloatingLabel = styled(FloatingLabel)
margin-left: 20px;;
const firstName = (
);
const lastName = (
);
`
!Custom Positioning Screen Recording
You can check all examples in action in this live demo.
API
===
| 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-componentsdiv
| container | Optional | | Component containerlabel
| label | Optional | | Label component
Label can be styled with styled-components:
`jsx
import styled from 'styled-components';
import FloatingLabel from 'react-styled-floating-label';
const BlueFloatingLabel = styled(FloatingLabel)
color: #0070e0;;`
To style placeholder use standard CSS properties with the "--placeholder-" prefix:
`jsx
const BlueFloatingLabelWithBoldPlaceholder = styled(BlueFloatingLabel)
--placeholder-font-weight: bold;;`
Demo
====
To run the demo, you need to clone the project and execute:
`bash``
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