In this lesson we'll show how to create an always rendered but invisible modal. Then using
measure we can find our action locations. We'll use a
PanResponder to register presses on an image. When you press and hold we'll use
Animated to show the modal. With the
onPanResponderMove we can check if the user has moved their finger onto an action. We'll use
setState updater function to highlight the action in bold and show how to take action in
In this lesson we'll take a look at how to render a basic line graph using D3, and VX. We'll move on to analyzing how to add some interactivity that will render a line where ever the user hovers using
bisect from D3. Then we'll show how to render another line path using the scales and manipulating our data. Finally we'll add another line split so we're rendering 2 line paths.
In this lesson we'll explore using Formik to create a form wizard. Each route will be a new piece of a form. We'll then use
matchPath to determine if we need to protect our data from being destroyed by navigating away from the page.
In this lesson we'll create a protected route just for logged in users. We'll combine a Route with a render prop and use a loggedIn prop to determine if the route should be allowed to be accessed. Finally we'll use nav state to preserve the location the user visited and redirect them back to the protected route once they login.
In this lesson we'll use the
matchPath function exported by react-router to find active nested routes inside of a parent component. This technique can be used for comparing routes outside of a React component, or even inside of life cycle methods to do data loading.
In this lesson we'll show how the Link component
to prop can receive an object. This allows us to pass
state to the route. With the nav state we destructure off of location we can determine if a user wants to open a modal or on a cold visit show an image embedded in the page.
In this lesson we'll show how to setup the Prompt component from React Router. We'll prompt with a static message, as well as a dynamic method with the message as a function. Finally we'll show that you can return
true from the message as a function to dynamically allow navigation.
In this lesson we'll use the
match.path value passed in by React Router to setup dynamic routes for Tabs. This will allow us to setup dynamic tabs which can be navigated to based upon the URL. With this pattern we can change the base path and our tab routes will automatically match and render correctly.
In this lesson we'll use
scaleLinear to render a line, and additionally add data points using
onMouseMove we will call the
invert function to do a reverse
domain value interpolation. Then we will use
Math.round and adjust the radius of the circle to highlight the selected point.
In this lesson we'll start by using
d3-scale to build up a
scaleBand for our
x data and a
scaleLinear for our
y data points to allow them to map and extrapolate our data correctly to renderable bars. We'll add in
padding between each bar, and then using the svg
rect will render a collection of bars.