eneskarpuz / react-native-drag-text-editor

📝 60FPS dynamic text editor powered with Reanimated

Home Page:https://eneskarpuz.github.io/react-native-drag-text-editor

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support a callback function to detect text changes

reggie3 opened this issue · comments

Is your feature request related to a problem? Please describe.
It would be useful to detect changes in the text content of the box.

Describe the solution you'd like
I propose adding an onChangeText prop that would receive the text contents of the control when those contents change

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

It would be accessed like this:

  <DragTextEditor
        ...
        onChangeText={(text: string) => console.log(text)}
      />

It would require the following code to be added to DragTextEditor.js:

componentDidUpdate(prevProps, prevState){
    if(this.state.text !== prevState.text){
      if(this.props.onChangeText){
        this.props.onChangeText(this.state.text);
      }
    }
  }

Additional context
I can submit a PR if this works for you @eneskarpuz

Thanks @reggie3. I agree, it would be useful. I'm waiting for your PR to merge but you'd better check these before you submit a PR;
1- I'm not sure about using type annotations like (text: string) .

onChangeText={(text) => console.log(text)}

isn't it better ?
2- You can add your Callback Function to onText function on DragTextEditor.js like;

onText=(text)=>{
... 
const {
 onChangeText,
} = this.props;

if ( text && onChangeText ){
 onChangeText(text);
 }
}

Sorry about the string annotation, I copied and pasted the code sample from a typescript file.
It makes sense to use the functionality you already have to implement the callback. I'll submit a PR based on what you said above.

@eneskarpuz How about this:

  onText = (text) => {
    this.setState({ text }, () => {
      if (text && this.props.onChangeText) {
        this.props.onChangeText(this.state.text);
      }
    });
  };

This way, the data sent back from the callback is in sync with what is in the component state.

Thanks @reggie3! Looks like a good idea. I think it'd be better to talk this on a PR.

Closing since this feature has been merged.