share data

index.ts

import * as React from 'react';
import { PropertyControls, ControlType } from 'framer';
import { data } from './Examples';

// Define type of property
interface Props {
  text: string;
}

export class Display extends React.Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      num: data.rotation.get() || 'empty',
    };
  }
  componentDidMount() {
    data.rotation.onUpdate(({ value }) => {
      this.setState({ num: value });
    });
  }
  // Set default properties
  static defaultProps = {
    text: 'Hello World!',
  };

  // Items shown in property panel
  static propertyControls: PropertyControls = {
    text: { type: ControlType.String, title: 'Text' },
  };

  render() {
    const style = {
      backgroundColor: 'red',
      width: this.state.num + '%',
    };
    return (
      <div>
        <div style={style}>{this.state.num}</div>
      </div>
    );
  }
}

Hi Artem, could you also share the Slider component where you set the data.rotation? Thanks for taking the time to help us with this