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: 2 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 (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T20:48:39.000Z (almost 2 years ago)
• Last Synced: 2024-09-30T14:04:23.865Z (3 months 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: 33
• 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 = (

    

        

    

);

```

![Typical Usage Screen Recording](https://github.com/ihor/react-styled-floating-label/blob/master/demo/screen-recordings/typical-usage.gif?raw=true)

### Styling With Props

```jsx

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

const address = (

    

        

    

);

```

![Styling With Props Screen Recording](https://github.com/ihor/react-styled-floating-label/blob/master/demo/screen-recordings/styling-with-props.gif?raw=true)

### 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 = (

    

        

    

);

```

![Styled Placeholder Screen Recording](https://github.com/ihor/react-styled-floating-label/blob/master/demo/screen-recordings/styled-placeholder.gif?raw=true)

### 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 = (

    

        

    

);

```

![Custom Positioning Screen Recording](https://github.com/ihor/react-styled-floating-label/blob/master/demo/screen-recordings/custom-positioning.gif?raw=true)

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)