Controlled Inputs

James Margenberg

Reactful Controlled Inputs

Yet another package for input components in Framer X, but this time they behave like traditional React Controlled Components.

Usage

Important: You have to do this for these inputs to work!

Override the inputs value and onValueChange props so you are controlling the input’s state with a value stored in a Data object.

const data = Data({ text: "" });

export const controlText: Override = foo => {
  return {
    value: data.text,
    onValueChange: (value: string) => {
      console.log(value);
      data.text = value;
    }
  };
};

This will allow you to easily change the value of the input at runtime by changing the value in the the Data object.

export const prefillText: Override = () => {
  return {
    onTap: () => {
      data.text = "John Doe";
    }
  };
};

Props

Primary

Name Type Description
value string The current value of the input.
onValueChange (value: string) => void Event for input value changing.

Styling

Name Type Description
stlying ”standard”, ”transparent” or "css" The styling of the input.
className string If styling is set to css, the css class name for the input.

Note: To use CSS in Framer X create a file named styles.css in your project’s code/ directory and write all your styles in there.

Other Attributes

All Input Types

  • placeholder
  • disbaled
  • readOnly

Number Input Only

  • numberMin
  • numberMax
  • numberStep

Select Input Only

  • selectOptions

Other Events

  • onBlur
  • onFocus
  • onMouseEnter
  • onMouseLeave

Example Project

You can download an example project showing how to use this component here.

Github

If you’d like to view the source code or contribute to this package you can do so on Github.

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree