1
00:00:00,120 --> 00:00:06,680
In this part we are going to create a custom open and first thing we can go to create a component.

2
00:00:06,720 --> 00:00:08,580
So we create a components folder.

3
00:00:08,600 --> 00:00:13,620
And like before we go to create a component a thought they ask.

4
00:00:16,560 --> 00:00:22,830
And then inside the component a we are going to copy the code from the previous project and paste it

5
00:00:22,830 --> 00:00:32,850
here so that we can have the button groups and we are going to use the bootstrap and also the we abstract.

6
00:00:32,970 --> 00:00:43,250
So we can copy this one and page it to install the poster have and also we are going to import the CSF

7
00:00:43,760 --> 00:00:44,620
and scenes.

8
00:00:44,670 --> 00:00:51,020
You can see we already use the button groups buttons and also the edges.

9
00:00:51,150 --> 00:00:54,960
So we are going to import these from Dolby wrap.

10
00:00:55,160 --> 00:01:02,100
Also we are going to use the USDA so we also have to import the USDA from the we add and these are also

11
00:01:02,100 --> 00:01:07,510
the function that we use to be for which are you using to set the counter.

12
00:01:07,620 --> 00:01:12,520
So now we can import the component from the component.

13
00:01:12,970 --> 00:01:20,530
So we import the component a form components component a.

14
00:01:21,400 --> 00:01:31,780
And then we paste a component here and we go to the CIA the Web site and you can see the counters already

15
00:01:32,110 --> 00:01:33,400
working fine.

16
00:01:33,400 --> 00:01:39,670
And now if we are going to create a component B we need to copy from the component a and create a component

17
00:01:39,670 --> 00:01:48,120
B and then we change the name to a component B but you see the order things have been duplicate ones.

18
00:01:48,520 --> 00:01:56,410
And so you can imagine if we have 10 countries and we have to go to create 10 functions and tend to

19
00:01:56,460 --> 00:01:57,450
use state.

20
00:01:57,670 --> 00:02:04,490
But before we go to talk about the test on the hope we are going to import the component B.

21
00:02:04,540 --> 00:02:08,770
Now you see the component B also working fine.

22
00:02:09,010 --> 00:02:16,420
Now we are going to talk about the custom hook the custom who used to extract the logics so that we

23
00:02:16,420 --> 00:02:23,140
do not need to duplicate this type of code in each of the component so we can cut this out.

24
00:02:23,890 --> 00:02:32,870
And then we go to create a folder called Custom hook and then we code to create a use convert all key

25
00:02:32,870 --> 00:02:45,220
s and then we create a function in this and also we import we add and use day from we add.

26
00:02:45,770 --> 00:02:56,350
Now we are going to call these at use contour and also explore the default use Conger and then we paste

27
00:02:56,350 --> 00:03:08,850
the logic tool here then we can let the user to customize the initial console where they use but if

28
00:03:09,340 --> 00:03:16,560
they do not set any values we the default value to be zero but for letting the other component to use

29
00:03:16,570 --> 00:03:24,170
these functions we have to return to where those otherwise the component cannot use.

30
00:03:24,310 --> 00:03:34,320
For example we have to we turn the cogs where the whole increment Dickerman and also that we set.

31
00:03:34,390 --> 00:03:43,420
Now we can do to the use contour by adding piece nine but we have to also need to import the second

32
00:03:43,450 --> 00:03:49,940
car from the custom hook and we do the same for the component B.

33
00:03:50,110 --> 00:03:59,110
So we delete all this code and paste the use counter and this time we try to offset any value to see

34
00:03:59,110 --> 00:04:06,490
whether it will get the default value to be zero because we already set the initial count to be zero.

35
00:04:06,490 --> 00:04:14,390
If we do an offset any value here and then we also need to import the U.S. conquer.

36
00:04:14,390 --> 00:04:17,350
So actually we do not need to use the.

37
00:04:17,630 --> 00:04:26,030
We add in the U.S. counter and also we do not need to use the U.S. state in the component because we

38
00:04:26,030 --> 00:04:30,940
already get all the things we need from the U.S. Canada.

39
00:04:30,950 --> 00:04:34,430
Now we can see that default value off component a is 10.

40
00:04:34,430 --> 00:04:43,440
And it can still increment and decrement and also we said and compare them be they neutral where they

41
00:04:43,590 --> 00:04:54,620
eat zero and you can see you can work independently and now we can try one more thing is we can allow

42
00:04:55,310 --> 00:05:03,080
to customize the increment values by setting and other variables port where they lose.

43
00:05:03,340 --> 00:05:12,350
You said that you knew already what is one so we go to the component B and we try to add the initial

44
00:05:12,360 --> 00:05:22,120
where there is zero and the incremental value is free and now if we try again you can see it increment

45
00:05:22,120 --> 00:05:24,060
by free rather than by 1.

46
00:05:24,070 --> 00:05:28,980
But the component a is still increment by 1.

47
00:05:29,000 --> 00:05:31,550
So this is how to use the custom hook.