Styling path stroke and remove background lines in React component

[LauraPiccolo]

Hi,
I am using iink in a react component and it's working but I can't figure out how to style the path stroke and the background lines (I don't want the lines).
Sorry if this is very obvious but I really can't find how ...
editor.penStyle() or editor.theme() are not being recognized by my component.

Did I forget to import something?
(I have this in my file: import * as iink from 'iink-js')

I would be really thankful if you could help!

Laura

[MyScriptSupport]

Hi Laura,

Thank you for contacting us!

In order to customize your style with a theming approach, you can use the following commands:

editor.theme({'.greenThickPen' : { font-family: 'Open Sans', color: '#00FF00FF', '-myscript-pen-width': 1.5 });
editor.penStyleClasses("greenThickPen");

You can find further information in our online documentation:
https://developer.myscript.com/docs/interactive-ink/1.4/web/iinkjs/styling/

Or draw inspiration from our online styling example:
example is available online https://myscript.github.io/iinkJS/examples/v4/customize_style.html
corresponding source code is here: https://github.com/MyScript/iinkJS/blob/master/examples/v4/customize_style.html

Regarding the text guidelines, they are displayed by default, but you can modify the text.guides.enable property to false if you don't want them:
The full configuration properties list is available here https://developer.myscript.com/docs/interactive-ink/1.4/web/reference/configuration-iinkjs/#text

You can find a ready to use example on how to diable the guidelines here https://myscript.github.io/iinkJS/examples/v4/websocket_text_iink_no_guides.html
with corresponding code https://github.com/MyScript/iinkJS/blob/master/examples/v4/websocket_text_iink_no_guides.html

In order to get a faster support or check whether other developers have raised similar questions, feel free to browse our support forum and ask any question on the forum:
https://developer.myscript.com/support

We hope, this will help and answer your questions!

Gwenaëlle

[LauraPiccolo]

Hi, Thank you for getting back to me so quick. As I told you, my problem is that I’m trying to do that in a React component. So I already checked all the documentation you sent me, but couldn’t find an answer to my question… My question is mostly where in my react element should I put it? In the useEffect? No where is the .theme() function recognized … Also this: editor.theme({'.greenThickPen' : { font-family: 'Open Sans', color: '#00FF00FF', '-myscript-pen-width': 1.5 }); editor.penStyleClasses("greenThickPen"); Which I also saw in the document doesn’t work in react. You can’t put dashes in keys, and there is a missing } at the end … I am sorry I just have been struggling a lot … I hope you can help me a bit further :) Thank you for taking the time to read! Have a good evening, Laura Piccolo +33 6 08 90 68 72 hello.laurapiccolo@gmail.com http://piccolora.fr

…

Le 2 déc. 2020 à 17:08, MyScriptSupport ***@***.***> a écrit : Hi Laura, Thank you for contacting us! In order to customize your style with a theming approach, you can use the following commands: editor.theme({'.greenThickPen' : { font-family: 'Open Sans', color: '#00FF00FF', '-myscript-pen-width': 1.5 }); editor.penStyleClasses("greenThickPen"); You can find further information in our online documentation: https://developer.myscript.com/docs/interactive-ink/1.4/web/iinkjs/styling/ <https://developer.myscript.com/docs/interactive-ink/1.4/web/iinkjs/styling/> Or draw inspiration from our online styling example: example is available online https://myscript.github.io/iinkJS/examples/v4/customize_style.html <https://myscript.github.io/iinkJS/examples/v4/customize_style.html> corresponding source code is here: https://github.com/MyScript/iinkJS/blob/master/examples/v4/customize_style.html <https://github.com/MyScript/iinkJS/blob/master/examples/v4/customize_style.html> Regarding the text guidelines, they are displayed by default, but you can modify the text.guides.enable property to false if you don't want them: The full configuration properties list is available here https://developer.myscript.com/docs/interactive-ink/1.4/web/reference/configuration-iinkjs/#text <https://developer.myscript.com/docs/interactive-ink/1.4/web/reference/configuration-iinkjs/#text> You can find a ready to use example on how to diable the guidelines here https://myscript.github.io/iinkJS/examples/v4/websocket_text_iink_no_guides.html <https://myscript.github.io/iinkJS/examples/v4/websocket_text_iink_no_guides.html> with corresponding code https://github.com/MyScript/iinkJS/blob/master/examples/v4/websocket_text_iink_no_guides.html <https://github.com/MyScript/iinkJS/blob/master/examples/v4/websocket_text_iink_no_guides.html> In order to get a faster support or check whether other developers have raised similar questions, feel free to browse our support forum and ask any question on the forum: https://developer.myscript.com/support <https://developer.myscript.com/support> We hope, this will help and answer your questions! Gwenaëlle — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#27 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANV7IRSAJXC4NXSV6VV6ZJDSSZQ65ANCNFSM4UJHGK3Q>.

[MyScriptSupport]

Hi,

There is indeed no theme() function in the editor: the theme is an editor parameter, that you can modify directly.

With the React integration sample, you can access the editor from the App.js.

We have made a code sample where you can find an example of customized theme & penstyle in the react-custom-style-example branch of our web integration samples:
https://github.com/MyScript/web-integration-samples/tree/react-custom-style-example/react-integration-examples

The editor customized theme & penstyle is done in this file:
https://github.com/MyScript/web-integration-samples/blob/react-custom-style-example/react-integration-examples/src/App.js

Gwenaëlle