![]() ![]() ![]() animation feels slow, I would adjust duration to be around 200-300 ms.And great job on writing readme! Here is some feedback: I like that everything is well organized, files, code, commits, it's really easy to navigate through and find out how things are connected to each other. I overcame this problem with simple event.preventDefault() with a setTimeout function but.Īdditional feedback or a criticism will be appreciated Thanks! □!Īwesome job, Tediko! I see you put a lot of effort into this project. I think build in isPresent state when clicking twice quickly didn't change the state. I am convinced that this is related to Framer Motion and AnimatePresence that allows components to animate out when they're removed from the React tree. Clicking twice quickly on header logo (navigate to home page, which render Invoices component) causes component not to render.I personally stick to option #2 because it has the most pros for me and a little longer import doesn't bother me. I am curious what method you use to name your components.I created helper utility called typographyStyles where I put all styles that I use across application. I didn't want to create a special component for my headings since they have no logic.I end up with object for dark/light theme with colors of each element and a few colors that are common. As I am changing the theme and many colors are changing, I wasn't sure how to make the color system.I just wanted to point out most important things here. You can find more about the things I used in the project in the README on github. Try to enter a page that doesn't exist - like ' /gotcha' Handle 404 routes in React Router and provide a fallback component for displaying an imfamous 404 Page Not Found error to the user.That replace position transitions with opacity. Based on whether useReducedMotion returns true or not we're passing different values to animate. In order to support users who have enabled their device’s Reduced Motion setting and make accessible animations I used useReducedMotion hook. Framer Motion is an open source, production-ready library that's designed for creating creative animations. To animate the pages transitions and modals I used Framer Motion API.In order to create an accessible modal I followed this great tutorial that follow the WAI-ARIA Practices. ![]() In this case, the focus trap turns on when the form or modal with invoice deletion/ status change is opened. To make application more ADA compliant ( which means the website should be entirely accessible using just keyboard) I prevent focus go outside the modal once the modal is opened.Then the React component that renders a form also controls what happens in that form on subsequent user input. ![]() In React, mutable state is typically kept in the state property of components, and only updated with setState(). In HTML, form elements such as, , and typically maintain their own state and update it based on user input.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |