https://github.com/ihor/react-styled-floating-label
Floating label component which works with any HTML input
https://github.com/ihor/react-styled-floating-label
floating-labels labels react reactjs styled styled-components
Last synced: 5 months ago
JSON representation
Floating label component which works with any HTML input
- Host: GitHub
- URL: https://github.com/ihor/react-styled-floating-label
- Owner: ihor
- License: mit
- Created: 2019-04-28T15:17:27.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T20:48:39.000Z (about 3 years ago)
- Last Synced: 2025-01-31T07:05:45.040Z (about 1 year ago)
- Topics: floating-labels, labels, react, reactjs, styled, styled-components
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-styled-floating-label
- Size: 2.11 MB
- Stars: 36
- Watchers: 2
- Forks: 2
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React-Styled-Floating-Label
===========================
Floating label component which works with any HTML input. Supports styling with [styled-components](https://styled-components.com). Check this [live demo](http://ihor.burlachenko.com/react-styled-floating-label-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
=====
### Typical Usage Example
```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 = (
);
```
### Styling With Props
```jsx
import FloatingLabel from 'react-styled-floating-label';
const address = (
);
```
### Styled Placeholder
```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 = (
);
```
### Custom Positioning
```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 = (
);
```
You can check all examples in action in this [live demo](http://ihor.burlachenko.com/react-styled-floating-label-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](https://styled-components.com):
```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](http://ihor.burlachenko.com/react-styled-floating-label-demo/).
Feedback
========
There are no mailing lists or discussion groups yet. Please use GitHub issues and pull request or follow me on Twitter [@IhorBurlachenko](https://twitter.com/IhorBurlachenko)