react-styled-floating-label

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.

``jsx
import FloatingLabel from 'react-styled-floating-label';

const email = (



);
`

Installation
============
npm i react-styled-floating-label styled-components --save


Usage
=====

$3

`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

$3

`jsx
import FloatingLabel from 'react-styled-floating-label';

const address = (
text="Address"
style={{
color: '#0070e0',
}}
placeholderStyle={{
fontWeight: 'bold',
}}>


);
`

!Styling With Props Screen Recording

$3

`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

$3

`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
===

$3

| 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

$3

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