DEV Community
Follow
How to globally hide currency/amount fields in a React + Rails app based on user permissions?
I’m working on an application built with React 19 (frontend) and Ruby on Rails 5.0.7.2 (backend).
The requirement is to hide all currency/amount fields in the UI based on user permissions.
The backend provides a boolean flag (e.g. can_view_amount: true/false) that indicates whether the logged-in user has permission to see amount fields.
If the user does not have permission, then all amount fields throughout the app should be hidden.
This should be implemented in a scalable and future-proof way:
It should be a one-time implementation, not something we have to manually re-implement on every new screen.
Even if new screens are added in the future that display amounts, the same logic should automatically apply without developers forgetting to handle it.
Question:
What would be the best architectural approach or design pattern to implement this?
I’m considering:
A global wrapper/component for displaying amounts (that internally checks permission before rendering).
A higher-order component (HOC) or React Context solution to control visibility.
Any Rails-side suggestions for structuring the permission flag so it integrates cleanly with the frontend.
Has anyone solved a similar problem, and what’s the most maintainable way to ensure amount fields are consistently hidden across the app based on permissions ?
