Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use reactstrap consistently and update bootstrap #903

Closed
spearec opened this issue May 19, 2023 · 2 comments · Fixed by #958
Closed

Use reactstrap consistently and update bootstrap #903

spearec opened this issue May 19, 2023 · 2 comments · Fixed by #958
Assignees
Labels
assigned the issue is currently being worked on by a developer

Comments

@spearec
Copy link
Contributor

spearec commented May 19, 2023

Is your feature request related to a problem? Please describe.

OED currently uses two nearly identical packages, reactstrap and react-bootstrap. Both of these packages implement Bootstrap in React, which is how OED renders it's UI components such as buttons, modals, dropdowns, etc.

After doing some research, I found that these packages are identical in what they show to the user, and nearly identical in what they offer to developers. As far as I can tell there is nothing that can be done with one that can't be done with the other.

Overall, react-bootstrap is a more popular package, but reactstrap is simpler and considered easier to use. Since OED was using reactstrap in most cases, I have chosen to move all components using react-bootstrap to reactstrap.

Describe the solution you'd like

OED should decide between one of these packages. This will allow developers to easily reuse code without worrying which package the component uses, as the syntax for the two packages (color, style, text, onClick, etc) are slightly different.

Additional context

https://npmcompare.com/compare/react-bootstrap,reactstrap
https://dev.to/cassiolacerda/using-bootstrap-in-reactjs-reactstrap-or-react-bootstrap-gng
https://hackernoon.com/reactstrap-vs-react-bootstrap
https://stackoverflow.com/questions/56061590/what-is-difference-between-reactstrap-and-react-bootstrap

@spearec
Copy link
Contributor Author

spearec commented May 19, 2023

Another thing that is relevant to this issue is that OED currently uses Bootstrap 4, and the corresponding react packages. It is probably a good idea to update to Bootstrap 5, as this offers a few more components and is 3 years newer. This may require some migrations, but I think everything OED uses should be backward compatible.

@spearec spearec changed the title Choose between reactstrap and react-bootstrap Use reactstrap consistently and update bootstrao May 31, 2023
@spearec
Copy link
Contributor Author

spearec commented May 31, 2023

Just an update to this - I've been making some slow progress on this. I have completed the migration over to reactstrap, as well as upgrading to reactstrap v9 and corresponding bootstrap v5.

Additionally, I have taken the chance while migrating modals to implement a new, in-form verification system for the create and edit modals. This system gives an admin instant feedback when their selection violates form validation requirements, and tells them what the issue is instantly, without having to click "submit," closing the modal and leaving it unclear as to where the state went.

@spearec spearec changed the title Use reactstrap consistently and update bootstrao Use reactstrap consistently and update bootstrap May 31, 2023
@huss huss added the assigned the issue is currently being worked on by a developer label May 31, 2023
@huss huss closed this as completed in #958 Jul 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
assigned the issue is currently being worked on by a developer
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants