#100DaysOfWeb in Python Transcripts
Lecture: Style matching tips with react-highlight-words
0:00 The last week I want to do is to highlight
0:03 a word as it matches in a tip.
0:09 We already installed the React highlight words plug in
0:12 so we can just import that at the top, like so
0:25 then I'm going to modify the tip component to use the
0:29 highlighter to highlight the word that matches.
0:33 Unfortunately I have to do that in two places because
0:36 here we have the tips code and here we have the tip text.
0:41 But even so the result will be pretty cool.
0:49 The highlighter is a component that uses the regular
0:52 syntax of a component and it has a couple of properties
0:56 we can set. I'm going to define a class of highlight
1:08 with search words as an array
1:15 and I'm going to give it the filter string
1:18 I passed in earlier.
1:21 Where is this filter string coming from?
1:23 Well, in the view when we did the loop over the tips
1:27 we explicitly passed it as a property to the tip
1:31 component. So filter string is now available as part of the props.
1:45 We set outerscape to true and importantly text to highlight
1:55 is the props tip and we are going to remove it
1:57 here because its now handled by a highlighter component.
2:05 We have to give it a default of empty because when I was
2:08 preparing it could not handle an undefined value.
2:13 And we close the component. So that's one and now we need
2:17 to do the same for the actual code.
2:22 So in pre tag I'm going to have another highlighter
2:25 component and that's why I said it's a bit of a shame we
2:31 have to do it twice because the code is almost the same.
2:34 We've got the highlighter component, same class name
2:39 same search words, same outerscape but the only thing
2:43 that changed is the text to highlight and here of course
2:45 it's the props code. Let's see how this works. Nice.
2:56 I actually had a style ready but I don't even think we
3:00 have to set it but lets do it just to see where we
3:03 set the ETSS in the tips folder under source there is
3:09 an index.css and if you want to have another style you
3:13 can just define your class here, highlight
3:23 and it directly detected the change. So now, apart from the
3:28 default yellow background, we have a red colour.
3:32 This way you know how you can treat the CSS of your
3:34 React app. Again it's under source index.css.
3:42 Which is linked under source index.js. Near you see
3:48 all the imports of the app.
3:50 I forgot to mention at the start that we wrote all the code
3:54 in the app component. Right?
4:00 And how that is actually displayed on the page is
4:04 index.js and index.html as a root id
4:15 index.js targets that root id and renders the app
4:19 component inside of it.
4:22 And that's where everything is coming together.
4:26 So pretty cool.
4:29 A fine end to our tips app with some nice styling.
4:33 That concludes the videos of day one.
4:36 See you tomorrow for the practical part of this lesson.