This package has been deprecated

    Author message:

    Package no longer maintained.

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

    3.0.0 • Public • Published

    uniform-react-components

    Travis npm version Conventional Commits semantic-release code style: prettier linter: lynt

    HOC for creating components with the same simple interface to handle onChange events on react components

    Also exports Input and Select components using this pattern to help with implementation of forms and such

    Features

    • Generate efficient onChange handlers, so you don't have to make every one of them manually
    • Easy form creation with components with the same interface
    • Great typescript support

    Usage

    For a class component

    import { UniformComponent, UniformProps } from "uniform-react-components"
     
    const MyUniformComponent = UniformComponent(
      class MyComponent extends React.Component<
        UniformProps<{ foo: string }> & { customProp: string }
      > {
        render() {
          return (
            <div>
              Custom prop: {this.props.customProp}
              <input
                name={this.props.data.path.foo.join(".")}
                type="text"
                value={this.props.data.value.foo || "undef"}
              />
            </div>
          )
        }
      },
    )

    For a SFC (stateless functional component)

    import { UniformComponent, UniformProps } from "uniform-react-components"
     
    const MyUniformComponent = UniformComponent(
      (props: UniformProps<{ foo: string }> & { customProp: string }) => (
        <div>
          Custom prop: {props.customProp}
          <input
            name={props.data.path.foo.join(".")}
            type="text"
            value={props.data.value.foo || "undef"}
          />
        </div>
      ),
    )

    UniformComponent

    The UniformComponent is the main component of uniform-react-components, it's a HOC which is used to make simple components for handling forms and subforms, or anything that holds a value and can be changed.

    All components created with 'UniformComponent' receive the props specified, plus a data which holds this helpers:

    interface IData {
      path
      value
      onChange
    }

    For example, for this type

    interface ISimpleData {
      age: number
      password: string
      username: string
    }

    The component will receive in the props.data handlers like if you did:

    props.data = {
      value: {
        age: 3,
        password: "myPassword",
        username: "myUsername",
      },
      change: {
        age: newAge => {
          /* dispatch this.props.onChange({ ...previousData, age: newAge })*/
        },
        password: newPassword => {
          /* dispatch this.props.onChange({ ...previousData, password: newPassword })*/
        },
        username: newUsername => {
          /* dispatch this.props.onChange({ ...previousData, username: newUsername })*/
        },
      },
      path: {
        age: ["previousPath", "otherPreviousPath", "age"],
        password: ["previousPath", "otherPreviousPath", "password"],
        username: ["previousPath", "otherPreviousPath", "username"],
      },
    }

    Full example:

    interface IData {
      foo?: string
      bar: number
    }
     
    interface IProps {
      hidden?: boolean
    }
     
    const MyUniformComponent = UniformComponent(
      class MyComponent extends React.Component<UniformProps<IData> & IProps> {
        render() {
          return (
            <div>
              {this.props.hidden ? "is hidden" : "is visible"}
              <input
                name={this.props.data.path.foo.join(".")}
                type="text"
                value={this.props.data.value.foo || "undef"}
              />
              <input
                name={this.props.data.path.bar.join(".")}
                type="text"
                value={this.props.data.value.bar}
              />
            </div>
          )
        }
      },
    )
     
    const MyUniForm = UniformComponent((props: UniformProps<{ a: IData; b: IData }>) => (
      <form action="">
        <MyUniformComponent value={props.data.value.a} />
        <MyUniformComponent hidden={true} value={props.data.value.b} />
      </form>
    ))

    Then mount MyUniForm component:

      <MyUniForm onChange={(data) => console.log(datavalue={{a: { bar: 3}, b: { bar: 5}}/>

    and every time the user types in the inputs, it will be outputted the value

    Built-in helpers

    uniform-react-components exports two input helpers ( UniformInput and UniformInputNumber ) and a select helper that have the same interface, it only changes the onChange ( and defaultValue which is the case of UniformInputNumber ) properties, and accepts all the properties of a plain input element. This only saves you the trouble of implementing these components, but you could implement them if you want to, and even add some more.

    UniformInput

    The same as the plain input element, but the onChange property returns an string instead of a change input event

    <UniformInput
      onChange={newValue => console.log(`This is my value ${newValue}`)} // newValue is string
      defaultValue="hello"
      // you can add all the other properties such as type, className, style...
    />

    UniformInputNumber

    The same as the plain input element, but the onChange property returns an number instead of a change input event, and the defaultValue accepts an number too. You must still set the type="number" property if you want a number input

    <UniformInputNumber
      onChange={newValue => console.log(`This is my value ${newValue}`)} // newValue is number
      defaultValue={3} // typescript complains if it's string
      type="number"
      // you can add all the other properties such as className, style...
    />

    UniformSelect

    import { UniformSelect, UniformOptionProps } from "./index"
        type MaleOrFemale = "male" | "female"
        const options: UniformOptionProps<MaleOrFemale>[] = [
          {
            value: "male",
            children: "Male",
          },
          {
            value: "female",
            children: "Female",
          },
        ]
        let changed: MaleOrFemale | null = null
        const el = <UniformSelect options={options} onChange={(newValue) => console.log(newValue)} defaultValue={"male"} />, // newValue is MaleOrFemale
    />

    The options is an array of Options, which has all the properties the option element takes, but value is restricted to the specified type, so it enforces type safety

    Keywords

    none

    Install

    npm i uniform-react-components

    DownloadsWeekly Downloads

    0

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    16.8 kB

    Total Files

    15

    Last publish

    Collaborators

    • danielpanpm