A Front-end Roundup of our Favourite React/JS Tools
At Blueclaw a lot of our development work revolves around creating front-end focused projects. Being tasked with quite a lot of of relatively varied, green-field builds means that we regularly end up evaluating and experimenting with a good amount of new techniques/third-party libraries. These tools commonly cover a range of front-end business, including everything from interactive maps and charts, to input validation and beyond. In this post we will do a roundup of what tools we’ve been using in the last few months and go over some of the interesting bits and team favourites.
A note on context before we get into it – at Blueclaw we regularly develop a variety of types of build, however, the most typical of these would be smaller, data-vis-heavy microsites, statically generated with React and Next.js. So, the tools we use and favour tend to revolve around the React/JS ecosystem.
Faker is one of our more established tools and since it’s adoption it has made stubbing out json a lot easier. During development, we’ve found that Faker tends to be useful to initially work with a fake dataset (including info like page copy, titles etc as well as the actual DATA data – numbers and stuff). By using Faker, we’re able to ensure the build can go ahead in parallel with the data being collated and it also means we don’t end up having to write multiple processes to map data from a content management solution to the desired shape needed by the application. When having to do that kind of thing by hand, attempting to keep things manageable would usually lead to a lot of copy/pasted data in much smaller sets – which would create more problems when you make the switch between fake and real data in the course of development. So, having a fast, flexible way to create that fake data, (and importantly, create it to the same comparable size and consistency as your real data will be) is super useful for the work that we do.
So, for a basic example, we could use Faker to assist in making a person object (classic…) by starting off with a make person function like this:
const FK = require('faker');
const makePerson = id => ({
id,
firstName: FK.name.firstName(),
lastName: FK.name.lastName(),
city: FK.address.city(),
country: FK.address.country(),
favouriteColor: FK.commerce.color(),
});
Then we could make an array of people from that with the ever-useful Array.from function:
const numberOfPeople = 50;
const myData = {
people: Array.from({ length: numberOfPeople }, (_, i) => makePerson(i)),
};So the whole demo file would look like this:
const FK = require('faker');
const makePerson = id => ({
id,
firstName: FK.name.firstName(),
lastName: FK.name.lastName(),
city: FK.address.city(),
country: FK.address.country(),
favouriteColor: FK.commerce.color(),
});
const numberOfPeople = 50;
const myData = {
people: Array.from({ length: numberOfPeople }, (_, i) => makePerson(i)),
copy: FK.lorem.paragraphs(2),
// whatever other data
};
module.exports = { myData };
You end up with ~400 lines of easily customisable json from a nice manageable js file. No more worrying about hacked together json stubs not being valid with that pesky extra hand-coded trailing comma etc.
React Countup is a React wrapper for countup.js, a library to tween between numbers. This is a pretty useful little gadget as it provides a really quick, easy way to inject a bit of extra production value into an area that otherwise could be boring, or to use animation to draw a user’s attention to a specific page element.
It’s an easy task to get a basic Countup instance up and running:
import CountUp from 'react-countup';
const MyComponent = () => {
const myVal = 300;
return (
<CountUp end={myVal} />
);
};Or as per the docs it can also be used as a hook:
import { useCountUp } from 'react-countup';
const SimpleHook = () => {
const { countUp } = useCountUp({ end: 1234567 });
return <div>{countUp}</div>;
};So, quite a nice little tool to have in the box – especially when working with a lot of numeric data.
Formik is a pretty big player in form handling under React, at the time of writing weighing in at over 19k Git stars. As far as we’re concerned this popularity is deserved, and even though the team don’t end up writing a huge amount of React-based form handling, this one has been very useful where we have needed to fill that need.
The main parts of the feature set that we’ve found useful have been revolving around submission and validation, with the integration with Yup being a really nice addition right out of the box.
For example:
<Formik
validationSchema={Yup.object().shape({
myInputName: Yup.string()
.min(2, 'too few chars')
.max(10, 'too many chars')
.required('this is required')
.uppercase('this should be all uppercase')
.strict(true),
})}
>With the validationSchema prop you can easily pass in your Yup schema. And the error and touched objects that you have access to within the form make it easy to conditionally display relevant (and granular) validation messages:
<Formik validationSchema={schema}>
{({
values,
touched,
errors,
isSubmitting,
handleChange,
handleBlur,
handleSubmit,
}) => (
<div className="inner">
<label htmlFor="email">
Email
<input
id="email"
placeholder="eg [email protected]"
type="text"
value={values.email}
onChange={handleChange}
onBlur={handleBlur}
/>
</label>
{errors.email && touched.email && (
<div className="input-feedback">{errors.email}</div>
)}
</div>
)}
</Formik>And in addition to that, there are also some helper components available to make that a bit less verbose.
So there it is, just a quick dip into what we’ve been up to recently. There are obviously some great libraries out there and an awful lot to explore within the ecosystem. The tools mentioned above are just some of the more interesting and useful that we’ve been using lately, but as always the search continues.
We’re always on the lookout for more tools and techniques to make our working lives easier and we’ll keep you updated with what we find! If you want to learn more about the work our team are doing, feel free to get in touch.
