Paige Niedringhaus paigen11

Staff Software Engineer at @blues, previously a digital marketer. | Technical writer & speaker | Co-host of Front-end Fire & LogRocket podcasts

paigen11 / header-with-react-socks-breakpoints.js

Created February 1, 2020 23:19

React Socks breakpoints wrappers, which will render a header component or a totally different sidebar component based on the viewport size.

	const Header = () => {
	return (
	<nav className="navbar-wrapper">
	<Breakpoint medium up>
	<ul className="navbar-links">
	<li className="navbar-link-logo">
	<NavLink to="/">
	<img src={TmdbIcon} alt="logo" />
	</NavLink>
	</li>

paigen11 / sidebar-component-rendered-with-small-react-breakpoints.js

Created February 1, 2020 23:36

The sidebar navlinks rendered by React Socks when the viewport is mobile sized or smaller.

	const Sidebar = () => {
	const [expandedLinks, setExpandedLinks] = useState(false);

	const toggleLinks = () => () => {
	setExpandedLinks(!expandedLinks);
	};

	return (
	<>
	<ul className="sidebar-top">

paigen11 / checkout-drawer-context-file.js

Created March 1, 2020 17:46

Initial createContext file for a new context instance in a React application.

 import { createContext } from 'react';
 const CheckoutDrawerContext = createContext({
   showDrawer: false,
   toggleCheckoutDrawer: () => {},
 });
 export default CheckoutDrawerContext;

paigen11 / cart-checkout-drawer-context-provider.js

Last active February 6, 2021 09:09

A sample of how to wrap the component providing the context values in a React application.

     <CheckoutDrawerContext.Provider value={{ showDrawer, toggleCheckoutDrawer }}>
       <section className="cart-checkout">
         <CartDrawer selectedCartItems={selectedCartItems} />
       </section>
     </CheckoutDrawerContext.Provider>

paigen11 / setup-values-for-context-provider.js

Last active March 1, 2020 18:18

The values and functions a context provider would be provided with where it's initialized to wrap a component.

   const [showDrawer, setShowDrawer] = useState(false);
   const toggleCheckoutDrawer = () => {
     setShowDrawer(!showDrawer);
   };

paigen11 / cart-summary-drawer-useContext-consumer.js

Last active March 1, 2020 22:28

A simple example showing a child component consuming the context provided by a parent with the useContext hook in a React application.

	import React, { useContext } from 'react';
	import { orderItems } from '../../../../services/orderService';
	import CheckoutDrawerContext from '../../../../context/CheckoutDrawerContext';

	export const CheckoutSummaryDetails = props => {
	const { summaryDetails, userInfo, items } = props;
	const checkoutDrawer = useContext(CheckoutDrawerContext);

	const placeOrder = async () => {
	const executionResponse = await orderItems(userInfo, items);

paigen11 / rtl-screen-example.js

Created March 28, 2020 19:38

Sample code using screen to ID elements in the DOM instead of container or component with React Testing Library

	import React from 'react';
	import { screen } from '@testing-library/dom';
	import { render } from '@testing-library/react';
	import { act } from 'react-dom/test-utils';
	import App from './App';

	describe('Product Browser App', () => {
	it('renders a welcome message', () => {
	act(() => {
	render(<App />);

paigen11 / rtl-waitForElement.js

Created March 28, 2020 20:23

Async example using waitForElement before searching the DOM for a button using React Testing Library

const orderButton = await waitForElement(() => container.getByTestId('order-submit-button'));

paigen11 / rtl-findByTestId.js

Created March 28, 2020 20:27

const orderButton = await container.findByTestId('order-submit-button');

paigen11 / rtl-fireEvent.js

Last active April 9, 2020 21:25

Asynchronous example of typical action like fireEvent with React Testing Library.

await fireEvent.click(orderButton);