Day 26 of 100days of code

Prop Types

With PropTypes, we specify the type of value we want the user to pass in for each of the props. For example, we can specify the maxRating prop to only accept number values. This is known as type checking.

First, we import PropTypes from the 'prop-types' library. PropTypes allows us to specify the expected types for each property passed to a component. This enables type checking on the props to ensure they match the expected types, such as numbers, strings, arrays, or other data types.

1. maxRating: Specifies that the maxRating prop should be a number.

2. color: Specifies that the color prop should be a string.

3. messages: Specifies that the messages prop should be an array.

4. size: Specifies that the size prop should be a number.

Note: TypeScript offers a more robust and comprehensive approach to type checking in React applications, providing numerous benefits in terms of developer experience, code quality, and reliability.

Reusable text expander component

I'm going to use this as my starter file. It already provides hints about the props required to create the reusable component.👇👇

The implementation of the TextExpander component is currently unfinished, as indicated by the placeholder "TODO" in place of its intended functionality.👇

I now accept all possible props based on how the component's user utilizes it.👇👇

Let's start by using the props to create the TextExpander component.👇

• children and className prop:

Result 👇

• expandedButtonText prop:

This dynamic value, passed as a prop to the TextExpander component, determines the text displayed on the expand button. If the expandButtonText prop is provided when using the TextExpander component, it will display the specified text. Otherwise, it defaults to "show more", as specified by the default value in the component's function definition (expandButtonText = "show more")👇👇.

The second instance of the TextExpander component has the expandButtonText prop explicitly passed. In this instance, the expandButtonText prop is set to "Show text". Therefore, this instance of TextExpander will display a button with the text "Show text" for expanding the content.👇👇

• collapseButtonText prop:

The collapseButtonText prop determines the text displayed on the button when the content is expanded and the user has the option to collapse it.

For instance, since the default collapseButtonText is set to "Show less", the button text will display "Show less" when the content is expanded. This indicates to the user that clicking the button will display less content.👇👇👇

• expanded:

This prop is passed to the TextExpander component and It indicates whether the component should be initially rendered in an expanded state (true) or collapsed state (false). If expanded is set to true, the component will display the full content by default. If it's set to false, the content will be collapsed initially.

The isExpanded state variable managed within the TextExpander component itself using the useState hook. It keeps track of the current state of the component: whether it's currently expanded (true) or collapsed (false). Initially, isExpanded is set to the value of the expanded prop.👇👇

The displayText variable is dynamically set based on the value of isExpanded. When isExpanded is true, it displays the full children content; otherwise, it shows a placeholder text ("hello" by default).

In the TextExpander component, the button text changes depending on the isExpanded state. When the content is expanded, the button text is set to collapseButtonText, indicating to the user that clicking the button will collapse or hide the expanded content.👇👇👇

Let's identify the instance where expanded is set to true 👇👇

• collapsedNumWords prop:

The collapsedNumWords parameter in the TextExpander component determines the number of words to display when the content is collapsed, i.e., when isExpanded is false . Since collapsedNumWords is set to 10, and the children content contains more than 10 words, the component will display the first 10 words followed by an ellipsis(...) when collapsed.

Instead of displaying the "hello" text, let's modify the behavior to display 10 words when isExpanded is false. In this context, the children.split(" ").slice(0, collapsedNumWords).join(" ") + "..." operation is used to limit the display of words when the content is collapsed. It works by splitting the children content into words, selecting a subset of words based on collapsedNumWords, joining them back into a string, and appending an ellipsis.👇👇.

• button event listener and buttonColor prop:

When the button is clicked, the function () => setIsExpanded((exp) => !exp) is called. This function toggles the value of isExpanded using the setIsExpanded function provided by the useState hook. It takes the current value of isExpanded (exp) and negates it using the logical NOT operator !. So, if isExpanded is true, it will become false, and vice versa.👇👇👇

For the buttonColor👇👇

This prop represents the color of the button. By default, it is set to #1f09cd Line 44👇

Within the component, a JavaScript object named buttonStyle is defined to specify the styles for the button element. The color property of this object is set to the value of the buttonColor prop, allowing you to dynamically set the text color of the button based on the provided prop.

style={buttonStyle}: This sets the inline styles of the button element to the styles defined in the buttonStyle object. As a result, the button will have the specified text color determined by the buttonColor prop.👇👇👇

Final result👇👇

Thank you for reading..❤