- It makes SVG illustrations from unDraw into customizable React components.
- Here it is on the newly launched design mentoring site called MentorOla, alongside a language site I’ve been working on myself called Little Lingua: – – While using React to build the Little Lingua website, I discovered that converting SVGs into React components made them much more manageable and even…
- Let’s make those colors easy to change: – – We can use the benefits of React to make the illustration customisable by adding *props* as placeholders that are used to fill the *color attributes* of the SVG/JSX in your component: – – To make sure you’re replacing the right fill…
- To learn more about transforming SVG illustrations into components, check out Elizabet Oliveira’s talk about her side project, React Kawaii which was also nominated as “Fun Side Project of the Year” at the React Amsterdam Open Source Awards:
I’ve recently published my first ever open source npm package! It makes SVG illustrations from unDraw into customizable React components. Here’s a GIF that shows what I mean: What’s unDraw? While unDraw is still fairly new, its open source nature means that it’s being used by a range of products already. Here it is
Continue reading “How to Create a Component Library From SVG Illustrations”
- But in the end, when implementing a larger application, you need a couple of more libraries to have a sophisticated web application with React as its core.
- The following article will give you an opinionated approach to select from these libraries to build a sophisticated React application.
- The library is for many people almost mandatory in applications when it comes to conditional stylings in React.
- Basically a fetch looks like the following, for instance in a React lifecycle method when a component mounts: – – Basically you wouldn’t have to add any other library to do the job.
Often it is difficult to find all the relevant libraries to complement your React application, because React’s ecosystem is a flexible yet large framework. The article gives you an opinionated React setup by choosing essential libraries: Redux, MobX, React Router, Flow, Styled Components, Lodash, Ramda, Prettier, Axios, …
Continue reading “Essential React Libraries in 2018”
- As you read through these guides, you can get an idea for how code is written at the respective companies.Why do we need styleÂ guides?For one main reason: Everyone writes code differently.
- Thatâs all fine and dandy as long as we each work on our code.
- But what happens when you have 10, 100, or even 1,000 developers all working on the same codebase?
- Style guides are created so new developers can get up to speed on a code base quickly, and then write code that other developers can understand quickly and easily!
- GrommetGrommet is a React-based web UI framework and design system in the tradition of older frameworks like Bootstrap, or newer ones like the web incarnation of Material Design.
- Itâs part of a new breed of React-based UI frameworks, the virtues of which I extoll in this post.
- Itâs a broad web design system, with guidelines for everything from layout to language.
- Itâs developed by a team at HP, so its design perspective is based on their internal needs.TL;DRGrommetâs a comprehensive and opinionated framework.
- If its UX and aesthetic choices match your needs, itâs a great ready-to-use system with everything accounted for.
Grommet is more than just a set of UI components. It’s a broad web design system, with guidelines for everything from layout to language.
Continue reading “React-based UI frameworks: Grommet – Prototyping: From UX to Front End”
- Every component you write can have a live example for the Style Guide in the Component Examples screen.
- An Unfair Head Start for your React Native Apps.
- Help identify differences with the Device Info screen.
- 3rd party libraries and functionality examples can be demonstrated on our Usage Examples screen.
- We use our generators to stub screens and functionality that every app needs!
Read the full article, click here.
@steevivo: “The ideal starting app for React Native ! go to #reactnative @infinite_red”
Ignite is an active React Native repo, invaluable to neophytes as well as seasoned
professionals. As React Native grows in strength, so does Ignite.
An Unfair Head Start for your React Native Apps.