Have ideas to improve npm?Join in the discussion! »

    react-labeled
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    React Labeled

    Higher-order component which lets you combine a label with a form field

    Usage

    import labeled from 'react-labeled'
     
    const LabeledInput = labeled('input')
     
    export default ReactComponent() {
      return <LabeledInput type="text">Label</LabeledInput>
    }

    You can also provide the label as a prop, if the form component takes children:

    import labeled from 'react-labeled'
     
    const LabeledSelect = labeled('select')
     
    export default ReactComponent() {
      return <LabeledSelect label="Label">
        <option>Option</option>
      </LabeledSelect>
    }

    The label can be rich content:

    import labeled from 'react-labeled'
     
    const LabeledSelect = labeled('select')
     
    export default ReactComponent() {
      return <LabeledSelect label={<strong>Label</strong>}>
        <option>Option</option>
      </LabeledSelect>
    }

    You can provide a custom label component as an optional second argument, as long as it accepts a htmlFor prop. Also, you can provide a custom wrapper with the component prop (the default is p):

    import labeled from 'react-labeled'
     
    import Input from './my-input'
    import Label from './my-label'
    import Wrapper from './my-wrapper'
     
    const LabeledInput = labeled(Input, Label)
     
    export default ReactComponent() {
      return <LabeledInput component={Wrapper}>Label</LabeledInput>
    }

    Legal

    Copyright © 2017, 2018 Reidar Djupvik

    Licensed under the MIT license. See the LICENSE file for details.

    Install

    npm i react-labeled

    DownloadsWeekly Downloads

    3

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    18.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar