Comments (4)
This is perfect. My issue was the idPrefix not being dynamic. Thanks for the tip about directly using class names when components/nunjucks aren't a good fit.
Regarding the the sass import wasn't working because I haven't actually imported the sass file in one of the JS files! Thanks again.
from govuk-react-jsx.
I think I get what you're saying but could you scribble up a quick mock up and post it so I know what you're aiming for? Even if it's just done in MS paint!
Also, you mention two form libraries... Do you need code examples for both or just the one?
If you could do that, I'll have a look Monday morning and see the best way to achieve what you want
from govuk-react-jsx.
Something like this:
https://codesandbox.io/s/formik-checkboxes-array-x393g
Kind of works, only issue I see is around clicking on the checkbox labels. For example, the second label ('Keep 56') is wired up to the first checkbox. I understand why this is happening due to the label for attribute not getting an increment of 2, 3, 4 etc as each array of Checkboxes only ever has one item.
I am working with Formik so a Formik example would great.
Also, can you help to work out why my import of govuk-frontend/frontend/all in App.js isn't working please. Using the components, the expected classes are applied but for some reason the govuk-frontend stylesheet aren't available
from govuk-react-jsx.
Is this sort of what you're looking for?
https://codesandbox.io/s/formik-checkboxes-array-i05vv
It's still a bit hard to see what you're aiming for with all the Lorem ipsum - hard to understand the purpose of this and get the semantics right. But I think I have done what you wanted, whilst making it look like govuk? Let me know if you have any other questions.
It's worth noting that this library just replicates the capabilities of the govuk-frontend nunjucks templates. There will be occasions where these don't quite meet your needs - it's completely ok in these situations to break out and make custom components just reusing the base govuk-frontend classes. Don't feel you have to use the <Checkboxes>
component to make a checkbox - just write a raw html <input type="checkbox">
, apply the govuk classes to style it up, and wire it up to formik with onChange
handlers etc.
As for the sass not compiling, you weren't quite importing it correctly. It should be @import "~govuk-frontend/govuk/all";
from govuk-react-jsx.
Related Issues (20)
- Cannot Import "Radios" or "Checkboxes" HOT 3
- Getting an error on certain components when rendered in CRA testing environment HOT 23
- Example of test setup in govuk-react-jsx-examples
- Consider how govuk-frontend JS is imported and used to avoid bloated bundles HOT 4
- Not possible to specify reactListKey properly on tables HOT 4
- Skip Link component inside Template HOT 3
- I guess this library doesn't work with gatsby react? HOT 5
- Documentation improvements HOT 1
- Type declarations
- Header rendering bug HOT 5
- GovUK Frontend version HOT 2
- Accessibility issue when using Input with a prefix or suffix HOT 8
- Radios/Checkboxes: error in console due to null ref prior to render HOT 7
- Throw warnings / errors when required data is not passed
- Test with remix.run
- Inline radio with conditionals renders strangely HOT 2
- React 18 support HOT 4
- Using certain components hangs react-scripts test HOT 17
- Consider how govuk-react-jsx is packaged up as a UMD. Switch to ESM? Both? HOT 3
- Ownership HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from govuk-react-jsx.