30 seconds of React

Visual

Click on a snippet's name to view its code.

Accordion

Renders an accordion menu with multiple collapsible content components.

  • Define an AccordionItem component, pass it to the Accordion and remove unnecessary nodes expect for AccordionItem by identifying the function's name in props.children.
  • Each AccordionItem component renders a <button> that is used to update the Accordion via the props.handleClick callback and the content of the component, passed down via props.children, while its appearance is determined by props.isCollapsed and based on style.
  • In the Accordion component, use the React.useState() hook to initialize the value of the bindIndex state variable to props.defaultIndex.
  • Use Array.prototype.map on the collected nodes to render the individual collapsiple elements.
  • Define changeItem, which will be executed when clicking an AccordionItem's <button>. changeItem executes the passed callback, onItemClick and updates bindIndex based on the clicked element.

Alert

Creates an alert component with type prop.

  • Define appropriate CSS styles and animations for the component's elements.
  • Use the React.setState() hook to create the isShown and isLeaving state variables and set their values to false.
  • Define timeoutId to keep the timer instance for clearing on component unmount.
  • Use the React.setEffect() hook to update the value of isShown to true and clear interval by using timeoutId when component is unmounted.
  • Define closeNotification function to set the component is removed from DOM by displaying fading out animation and set isShown to false via setTimeout().
  • Define the component, which renders the alert component with user defined message and a close button to remove the component from DOM.

AutoLink

Renders a string as plaintext, with URLs converted to appropriate <a> elements.

  • Use String.prototype.split() and String.prototype.match() with a regular expression to find URLs in a string.
  • Return a <React.Fragment> with matched URLs rendered as <a> elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.

Carousel

Renders a carousel component.

  • Use the React.setState() hook to create the active state variable and give it a value of 0 (index of the first item).
  • Use an object, style, to hold the styles for the individual components.
  • Use the React.useEffect() hook to update the value of active to the index of the next item, using setTimeout.
  • Destructure props, compute if visibility style should be set to visible or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.
  • Render the carousel items using React.cloneElement() and pass down rest props along with the computed styles.

Collapse

Renders a component with collapsible content.

  • Use the React.setState() hook to create the isCollapsed state variable with an initial value of props.collapsed.
  • Use an object, style, to hold the styles for individual components and their states.
  • Use a <div> to wrap both the <button> that alters the component's isCollapsed state and the content of the component, passed down via props.children.
  • Determine the appearance of the content, based on isCollapsed and apply the appropriate CSS rules from the style object.
  • Finally, update the value of the aria-expanded attribute based on isCollapsed to make the component accessible.

CountDown

Renders a countdown timer that prints a message when it reaches zero.

  • Use object destructuring to set defaults for the hours, minutes and seconds props.
  • Use the React.useState() hook to create the time, paused and over state variables and set their values to the values of the passed props, false and false respectively.
  • Create a method tick, that updates the value of time based on the current value (i.e. decreasing the time by one second).
  • If paused or over is true, tick will return immediately.
  • Create a method reset, that resets all state variables to their initial states.
  • Use the the React.useEffect() hook to call the tick method every second via the use of setInterval() and use clearInterval() to cleanup when the component is unmounted.
  • Use a <div> to wrap a <p> element with the textual representation of the components time state variable, as well as two <button> elements that will pause/unpause and restart the timer respectively.
  • If over is true, the timer will display a message instead of the value of time.

FileDrop

Renders a file drag and drop component for a single file.

  • Create a ref called dropRef for this component.
  • Use the React.useState() hook to create the drag and filename variables, initialized to false and '' respectively. The variables dragCounter and drag are used to determine if a file is being dragged, while filename is used to store the dropped file's name.
  • Create the handleDrag, handleDragIn, handleDragOut and handleDrop methods to handle drag and drop functionality, bind them to the component's context.
  • Each of the methods will handle a specific event, the listeners for which are created and removed in the React.useEffect() hook and its attached cleanup() method.
  • handleDrag prevents the browser from opening the dragged file, handleDragIn and handleDragOut handle the dragged file entering and exiting the component, while handleDrop handles the file being dropped and passes it to props.handleDrop.
  • Return an appropriately styled <div> and use drag and filename to determine its contents and style.
  • Finally, bind the ref of the created <div> to dropRef.

Loader

Creates a spinning loader component.

  • Define appropriate CSS styles and animations for the component's elements.
  • Define the component, which returns a simple SVG, whose size is determined by the size prop.

Mailto

Renders a link formatted to send an email.

  • Destructure the component's props, use email, subject and body to create a <a> element with an appropriate href attribute.
  • Render the link with props.children as its content.

Modal

Renders a Modal component, controllable through events. To use the component, import Modal only once and then display it by passing a boolean value to the isVisible attribute.

  • Use object destructuring to set defaults for certain attributes of the modal component.
  • Define keydownHandler, a method which handles all keyboard events, which can be used according to your needs to dispatch actions (e.g. close the modal when Esc is pressed).
  • Use React.useEffect() hook to add or remove the keydown event listener, which calls keydownHandler.
  • Use the isVisible prop to determine if the modal should be shown or not.
  • Use CSS to style and position the modal component.

RippleButton

Renders a button that animates a ripple effect when clicked.

  • Define some appropriate CSS styles and an animation for the ripple effect.
  • Use the React.useState() hook to create appropriate variables and setters for the pointer's coordinates and for the animation state of the button.
  • Use the React.useEffect() hook to change the state every time the coords state variable changes, starting the animation.
  • Use setTimeout() in the previous hook to clear the animation after it's done playing.
  • Use the React.useEffect() hook a second time to reset coords whenever the isRippling state variable is false.
  • Handle the onClick event by updating the coords state variable and calling the passed callback.
  • Finally, render a <button> with one or two <span> elements, setting the position of the .ripple element based on the coords state variable.

StarRating

Renders a star rating component.

  • Define a component, called Star that will render each individual star with the appropriate appearance, based on the parent component's state.
  • In the StarRating component, use the React.useState() hook to define the rating and selection state variables with the initial values of props.rating (or 0 if invalid or not supplied) and 0.
  • Create a method, hoverOver, that updates selected and rating according to the provided event.
  • Create a <div> to wrap the <Star> components, which are created using Array.prototype.map on an array of 5 elements, created using Array.from, and handle the onMouseLeave event to set selection to 0, the onClick event to set the rating and the onMouseOver event to set selection to the star-id attribute of the event.target respectively.
  • Finally, pass the appropriate values to each <Star> component (starId and marked).

Tabs

Renders a tabbed menu and view component.

  • Define a TabItem component, pass it to the Tab and remove unnecessary nodes expect for TabItem by identifying the function's name in props.children.
  • Use the React.useState() hook to initialize the value of the bindIndex state variable to props.defaultIndex.
  • Use Array.prototype.map on the collected nodes to render the tab-menu and tab-view.
  • Define changeTab, which will be executed when clicking a <button> from the tab-menu.
  • changeTab executes the passed callback, onTabClick and updates bindIndex, which in turn causes a re-render, evaluating the style and className of the tab-view items and tab-menu buttons according to their index.

Ticker

Renders a ticker component.

  • Use the React.useState() hook to initialize the ticker state variable to 0.
  • Define two methods, tick and reset, that will periodically increment timer based on interval and reset interval respectively.
  • Return a <div> with two <button> elements, each of which calls tick and reset respectively.

Toggle

Renders a toggle component.

  • Use the React.useState() to initialize the isToggleOn state variable to false.
  • Use an object, style, to hold the styles for individual components and their states.
  • Return a <button> that alters the component's isToggledOn when its onClick event is fired and determine the appearance of the content based on isToggleOn, applying the appropriate CSS rules from the style object.

Tooltip

Renders a tooltip component.

  • Use the React.useState() hook to create the show variable and initialize it to false.
  • Return a <div> element that contains the <div> that will be the tooltip and the children passed to the component.
  • Handle the onMouseEnter and onMouseLeave methods, by altering the value of the show variable.

TreeView

Renders a tree view of a JSON object or array with collapsible content.

  • Use object destructuring to set defaults for certain props.
  • Use the value of the toggled prop to determine the initial state of the content (collapsed/expanded).
  • Use the React.setState() hook to create the isToggled state variable and give it the value of the toggled prop initially.
  • Return a <div> to wrap the contents of the component and the <span> element, used to alter the component's isToggled state.
  • Determine the appearance of the component, based on isParentToggled, isToggled, name and Array.isArray() on data.
  • For each child in data, determine if it is an object or array and recursively render a sub-tree.
  • Otherwise, render a <p> element with the appropriate style.