rotating rhombus for ideation

MAREUMMO™ 2.0

BM Generation Framework & Product Design ToolKit

It’s clonable and obviously all for FREE

Full Story of MAREUMMO™ 2.0 ToolKit

MAREUMMO™ 2.0 are Symbol based Framework/ToolKit for quick design or wireframe of your next product or buisness model project. 100 symbols & elements ready for design or hi-fidelity wireframe for any designers or developers out there.

The main goal of this project is to help you - Webflow users - with creating beautiful landing pages or wireframes within minutes directly in Webflow with ready to be published code.

Let's look at

What’s NEW Inside

This package is filled with 31 new canvas it contains 12  features with 3 target segments, 3 value propositions and 3 categories in 2 different business models.

31 New Canvas for BM & Product

All Canvas divided into 10 most popular categories, nicely labeled to be easily copy and pasted from the MAREUMMO symbols panel into your projects.

Explore More

Product&Manufacturing

Clean portfolio for anyone presenting their photos, designs or any other projects.

Explore More

Platform Business

Agency page overview focused on team, process explanation and services.

Explore More

AI Service

Landing page for conceptual music app focused on presenting its best features.

Explore More

Flow Designer

Easily build automated flows for business model generation and product design using flowchart or mindmap style diagrams.

Building block

All Canvas with easy-to-use building block are structured to fit all 5 breakpoints of MAREUMMO™ Designer.

Data Catalog

Building Blocks are embeded with datasets by Industry, Country, Product Category & Features, Technology and market &  interest Keyword.

평가 Tool

MAREUMMO™ 2.0 come with  all possible business model definitions and product features pre-ideationed for you. 제품경쟁력 평가 Tool & 기술평가 Tool

MAREUMMO™ 2.0
BM Generation Framework & Product Design ToolKit
Massive Update & New Project is Live

100 symbols/element ready for design or hi-fidelity wireframe for any Flow designers or developer out there.

Explore MAREUMMO™ 2.0
All CaNVAs Divided into

10 Most Common Blocks

Clear
Showing 0 results of 0 items.
highlight
Filtering by:
Tag
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
No items found.
All Cards Divided into

10 Most Common Sections

Hillarious

Is it Hilarious When Women Eat?

Explore
.CARD .CARD1-CONTENT
Introducing

5 Crazy Recent News Stories

Explore
.card .card2-content
Trending

Alton Attorney Accidentally Sues Himself

Explore
.CARD .CARD3-CONTENT
Rice on the Rise

There's A Rice Deal Out There For Everyone

Explore
.CARD .CARD4-CONTENT
Sport

Tiger Woods plays with own balls, Nike says

Explore
.card .card5-content
Comedy

Are you Joey from Friends?

Explore
.CARD .CARD6-CONTENT
Quiz

Quiz: What Should Your Tinder Bio Be?

Explore
.article
FOOD

45 Creative Coffee Shop and Names

Explore
.ARTICLE
Cryptomarket

5 Reasons Cryptocurrency Is Way Dumber Than You Thought. With real examples.

Explore
.ARTICLE
Other

Banana

$2

.product-card
Music

Speaker

$199

.PRODUCT-CARD
NBA Players

Headphones

$349

.PRODUCT-CARD

2.40

$991.24
ETH
-9.9%
.number-card .number-card-content1

34.3

$820.53
TNB
+15.2%
.NUMBER-CARD .NUMBER-CARD-CONTENT2

1902.1

$154,569
BTC
+932.1%
.NUMBER-CARD .NUMBER-CARD-CONTENT3

994.2

$238.89
ENG
+3.2%
.NUMBER-CARD .NUMBER-CARD-CONTENT4
Local News

Army Vehicle Disappears

An Australia Army vehicle worth $74,000 has gone missing after being painted with camouflage.

.big-article

Mary Ortega

Designer

Love basketball, hiking, work in the legal field, and my best friend is a gold fish.

.Profile-card-big

Mary Ortega

Fashion Blogger

Love basketball, hiking, work in the legal field, and my best friend is a gold fish. 

Send Message
.profile-card

Mary Ortega

Fashion Blogger

Love basketball, hiking, work in the legal field.

.fullpic-profile
Music

Quiz: What Should Your Tinder Bio Be?

Marc Norris
.article .article-1-Content
Facts

Statistics show that teen pregnancy drops off significantly after age 25.

Tom Jordan
.ARTICLE .ARTICLE-2-CONTENT
Business

Hot to succeed in business, easily.

Johnny Logan
.ARTICLE .ARTICLE-3-CONTENT
Facts

Everything known about women.

Jack Gutierrez
.ARTICLE .ARTICLE-4-CONTENT
Funny

Eating people is wrong, always.

Billy Fuller
.ARTICLE .ARTICLE-5-CONTENT

Hero

Introducing

Cards - Webflow UI Kit

Biggest pack focusing on designs of Dashboard User Interfaces & Web Applications to help you quickly prototype and design beautiful.

Explore More
.Hero1
Centered
Let me present you

Desert Walks

Biggest photo pack focusing only on people walking in the desert. I know, crazy.

Explore More
.Hero2
Left Aligned

Forms

.signup-form

Navigation / Menu

Colours via Global Colours

.SWATCH-BLOCK-BIG
#1991EB
.SWATCH-BLOCK-BIG
.2nd-SWATCH-100
#3023ae
.SWATCH-BLOCK-BIG
.3rD-SWATCH-100
#39b54a
.SWATCH-BLOCK-BIG
.4th-SWATCH-100
#c5d0de
.SWATCH-BLOCK-BIG
.5TH-SWATCH-100
#f7981c
.SWATCH-BLOCK-BIG
.6TH-SWATCH-100
#f85359
.SWATCH-BLOCK-BIG
.7TH-SWATCH-100
#333
.SWATCH-BLOCK-BIG
.8TH-SWATCH-100
#66493e

Typography

Far far away, behind the word mountains.

Heading 1

Far far away, behind the word mountains, far from the countries

Heading 2

Far far away, behind the word mountains, far from the countries

Heading 3

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

Heading 4
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.
Heading 5
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.
Heading 6

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about.

Paragraph

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about.

Larger Paragraph
A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences.
Quote
  • A small river named Duden
  • It is a paradisematic country
  • Which roasted parts
List
Introducing Dashboard UI Kit Styleguide
.Tagline

Buttons

Value
.button
Value
.button .green-button
Value
.button .violet-button
Value
.button .default-button

Alerts

Get ready for your flight! Boarding starts at 9:45AM.
.alert .positive-alert
Hey man! Go check out janlosert store for more amazing products!
.alert .neutral-alert
Ou snap! Seems like there is a problem with our server.
.alert .warning-alert
Damn... What the hell have you done.
.alert .error-alert

Labels

default label
.label
Green Label
.LABEL-green
Violet Label
.LABEL-violet
This one is yellow
.LABEL-Yellow
Red One
.LABEL-Red
50 Shades... No
.LABEL-Grey

Social Buttons

.social-icon
.icon-facebook
.SOCIAL-ICON
.ICON-twitter
.SOCIAL-ICON
.ICON-Instagram
.SOCIAL-ICON
.ICON-googleplus
.SOCIAL-ICON
.ICON-linkedin
.SOCIAL-ICON
.ICON-Pinterest
More Stuff for you

More Resources for You

To help you quickly jump into Cards 2.0 I've prepared a full tutorial overview video on Youtube, recreated all cards in Sketch and give you easy access to the framework styleguide.

Framework Styleguide

Full overview of all major .classes accessible through this styleguide. Edit your fonts, buttons, labels with one click. All wraps and columns included as well!

Explore Styleguide

Youtube Walkthrough

Still struggling to wrap your head around? I've also prepared a complete walkthrough of files, system and logic behind this UI Kit/Framework.

Watch Video

Complete Sketch File

All cards designs are available for Sketch as well with all assets as a separate canvas to help you easily put your designs and images in place.

Get Sketch File

Start using MAREUMMO™ 2.0 today

Clone this Project
It’s clonable and obviously all for FREE

Wholesale Fashion material platform

Reset All
Clear
Showing 0 results of 0 items.
highlight
Filtering by:
Tag
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Name
Phone
Country
Last update
Actions
LO SCAMPOLAIO DI ZERLETTI ANNA LORENA & C.SNC
(+39)0376653569
italy
N/A
PMT S.R.L.S.
(+39)0733688008
italy
N/A
Tessuti Mazzarini
(+39)0717221889
italy
N/A
SERETEX
(+39)03311499534
italy
N/A
La Bottega Del Tessuto
(+39)0774526169
italy
N/A
Subversive Cross Stitch
N/A
usa
JULIE JACKSON
Dotdash Meredith
(212) 204-4000
usa
N/A
SEW HOUSE SEVEN
N/A
usa
PEGGY CHRISTINE MEAD
Interior Purchasing Corporation, Inc
(800) 590-5844
usa
N/A
Lion Brand Yarn
(212) 243-8995
usa
Mr. David Blumenthal
Double Click
to expand
This is a great place for some social proof! What are some exciting metrics you can brag about?
Swiggy Black Logo
Google Black Logo
Collibra Black Logo
Meta Black Logo
Rippling Black Logo
Amazon Black Logo
GitLab Black Logo
Doordash Black Logo
Unilever Black Logo
Zoom Black Logo
Adobe Black Logo
Dialog Black Logo
Airtable Black Logo
Remote.com Black Logo
PayPal Black Logo
Airbnb Black Logo
Swiggy Black Logo
Google Black Logo
Collibra Black Logo
Meta Black Logo
Rippling Black Logo
Amazon Black Logo
GitLab Black Logo
Doordash Black Logo
Unilever Black Logo
Zoom Black Logo
Adobe Black Logo
Dialog Black Logo
Airtable Black Logo
Remote.com Black Logo
PayPal Black Logo
Airbnb Black Logo

This post has an auto-generated table of contents

Duncan Hamra
March 15th 2022

React Context API: What it is and How Does it Work?

When the React library was introduced into the community some years back, it was accepted and soon gained lots of popularity as the choice for building out user interfaces in a composable way. The major idea was that each UI interface can be split into multiple different small components and at the end of the day, these components can be combined or composed to form the whole larger UI as intended.


class App extends React.Component { 
render() { 
return ( 
      <ColorContext.Provider value="white"> 
      <SampleComponent /> 
      </ColorContext.Provider> 
    ); 
  } 
} 

As a background to what we are trying to present, if we were building multiple UI components for example, we indeed have a component tree which includes the parent component, which becomes the source of truth for our data, and due to the interrelation dependence on the parent components and those underneath it known as the children or descendant component to share data, it comes a point where this becomes an issue.

As we stated earlier, for small to medium apps, sharing data across many different components could be easy, since all we need to do is pass this data or props across or down from the parent to every child that needs it. Now this is fine. What if we have a hugely nested or a large component tree and we intend to pass the data or prop down this tree?

Do we still take the route of passing data down to every level until we get to that hundredth component that needs this data? Well, then, it becomes a bummer. This is what React context tries to solve. Before we begin to explore this API, let us be aware that before it was introduced, we had to rely on an external library or package known as Redux to deal with issues like this.


class App extends React.Component { 
render() { 
return ( 
      <ColorContext.Provider value="white"> 
      <SampleComponent /> 
      </ColorContext.Provider> 
    ); 
  } 
} 

We usually reach out for Redux when we discover that the component tree is becoming too complex and sharing data across our component is becoming a tedious process. While this worked for most of us, Redux came with its own challenges.

Firstly, Redux came with a lot of boilerplate code we need to come to terms with. It also introduced a learning curve for new developers coming to our code base. Lastly, it adds another layer of external dependencies we needed to keep track of. Redux is not the purpose of our post, so we will not be dwelling much on it until we compare context and redux.

What is React Context?

React context, a core React API provides an easier interface for developers to share data or pass props down multiple levels deep in our React applications. From the React docs, with react context, we can easily pass data down to the very component that needs it at any level in the component tree, without having to explicitly pass this data down each component level in the tree. This is all there is to React context.

To drive this definition further for more clarity, say you have a particular theme color set at the parent component level of the app, and you only intend to pass it down to the thirtieth component down the tree, without having to pass it down every level until you get to that thirtieth level, but just pass it down to only the thirtieth component, is what react context provides for us out of the box. Let us see an example of this with a simple snippet below -

 
class SampleComponent extends React.Component { 
  // using the experimental public class field syntax below. We can also attach  
  // the contextType to the current class 
  static contextType = ColorContext; 
  render() { 
    return <Button color={this.color} /> 
  } 
} 

We can create a context with a default value. Of course, we need to import the React component library as usual. A typical component we could pass around is a color themed component for example:

Wrap whatever component you intend to pass data to, say \SampleComponent\\\\ in a provider (the \ColorContext\\\\ in this case), shown below:

And this is how you use the \SampleComponent\\\\ with the context instantiation below. Say the \SampleComponent\\\\ returns a Button, all we need to do is to just call the current context on that component and that is all. See below:

Note that even though we have another component wrapping the \SampleComponent\\\\, we do not have to explicitly pass down the data anymore. React handles passing down the closest color provider above and then makes use of its current value.

While context is great, using context in lots of places in our application makes it hard to reuse our components in other places, since the component is already tied to that particular context. And as we may know, this defeats the ethos and selling point of React components being reusable across the entire stack.

Why do we use Context in React?

As we have earlier mentioned, we use context in React when we need to pass data down the component tree. As we may know, react is a component-based library for building declarative user interfaces. Since it is component based, there is a need to share data across the component tree.

Passing data from the topmost or top-level component to the bottommost or last component down the tree can be cumbersome and tedious for medium to large scale apps. Before context was introduced, we either had to use external packages chief of which was Redux or pass the data as props one component at a time down the tree, until we got to our target component down the tree. Of course, this would be impossible to do for exceptionally large apps. This is indeed what React context attempts to alleviate for us.

This data is usually global data in a store, which sort of acts like a source of truth for our data cache. A typical example would be an app that serves content in many different languages. Say I am a Finnish speaker and I switch to Finnish, I expect all the pages I visit to be in Finnish right?

For us to easily achieve this, we can just pass the props to the component that needs them only, which corresponds to the pages I am visiting and bypass all other intermediate components that do not care about this prop. Of course, this is the power of the context API.

Alternatively, if we only have the goal of not passing data or props across just a few portions of the component tree of our application, we can make use of component composition, which is a simpler version of what context does. Component composition is a React paradigm which advocates for using large containers to wrap or return smaller or children components. The idea is favoring component composition over component inheritance.

The only caveat with this approach is of course, keeping the top-level or higher-level component in the tree too complicated, since all the logic is happening there.

In this post, we will not be focusing much on this topic. For more details, do check out the react documentation, where it is extensively covered.  However, with context, we can pass the same data to many components in the tree, and when any change occurs at the source, this change is equally propagated automatically down to every component level that has access to this data.

How does React Context Work?

React context works by exposing a ´context object´. As shown below, we declare a context object with a default value:

This context object, \MyContext\\\\ has a \Provider\\\\ component that allows as many other components as possible below it who need access to context object changes, subscribe to it. This means that context changes can be subscribed to on the component hierarchy by consuming components who must be children of Provider components. The signature of a Provider component is shown below:

It comes with a value prop, which is passed to the components down the tree that are descendants of the said Provider. This means that whenever the Provider props changes, these changes would also be propagated down the tree to every component subscribed to the Provider component, which would of course cause a re-render.

During render or in other lifecycle methods like componentDidMount(), componentDidUpdate() and so on, we can make use of the current value of the context. Let us see an example with the \render()\\\\ method below:

As you can see on the first-line, we are initializing our context object here, and assigning the \contextType\\\\ to the class that needs that context. In doing so, this allows us to consume the nearest context value using \this.context\\\\ inside any react lifecycle hook or even during render. Note that we can only subscribe to just a single context with this approach. Not to worry, we will look at an example later in the post.

Note: In the case where there is no matching Provider up in the tree, the component makes use of the ‘defaultValue' from the initial context object instantiation. This tells us that as many consumers as possible can subscribe to a single context object or Provider component, as the case may.

When should you use React Context?

Like we have highlighted earlier, react context shines when we need to pass data as props from a top-level global component to multiple other components down the hierarchy without having to explicitly pass the props to each other component. The point is, when we need access to data at a very deep level, it would be tedious to pass that data to every component, including those that dont need access to this data.

As a good example, consider we intend to get the current authenticated user on a web page, we can share that data across from a component at the global level to the protected route that needs access to that data. With context, we do not necessarily have to pass props through intermediate components that have no business knowing anything about the data.

How to use React Context (Creating your own context)

Now, let us learn how to make use of react context by creating our own context. We will be making use of the code sandbox playground to demonstrate our example. Supposing we plan to share language preference data from a global store state, first thing we need to do is declare the context object shown below -

We start by creating a file and calling it \Language.js\\\\. In this file, we instantiate our context object:

At this point our home component is empty. Let us assume this component is a component down the tree hierarchy that needs access to this Language context and is subscribed to it. Let us define the component below:

Finally, we can now add our root component. Let us call it ìndex.js\`. See below:

The output when we run the code on the sandbox is shown below:

A link to the sandbox can be found here. We can play with the values in the top-level component and see what happens. Also, note that we can as well define a new context type at any level and the consumer of that context would get the new value defined. Next up, let us look at the \useContext\\\\ hook, a React hook that replaces all the magic happening in the \Home\\\\ component file of our example.

UseContext Hook

React hooks was introduced in the React 16.8 version release to ditch state and other features of react hitherto only available when working with class components to now work with function components in the library. The signature of this React hook is shown below:

This is equivalent to calling:

\\\\\\ static contextType = MyContext  \\\\\\\\\, in a class-based component as we saw earlier. And as we already know, this context hook accepts the context object as usual and returns the current context value for that context. More details about hooks in general can be found in the docs.

React context versus React Redux

As we have learnt in the past few sections, context was designed for passing data deep down in nested components in the component hierarchy or tree. This is unlike Redux. Of course, with Redux, we can achieve this, but even more. In fact, Redux uses the context API under the hood to pass data across multiple levels of the component hierarchy. As we may know, every tool comes with a tradeoff, and it is our duty as engineers to pick the right tools for the right job as the use case demands.

If the idea is to only perform the actions of what context does with Redux in our applications, then we might not need Redux anymore and can simply replace it with the inbuilt core context API. However, if we need other stuff that comes with Redux, including its powerful dev tools, ability to step through the state at every point in the component tree, redux middleware capabilities which allows us to do even much more when it comes to application logic, then we are in for a big day.

According to the documentation, Redux is a predictable state container for react applications, that centralizes state updates from a read only store which acts as the sole source of truth for your application data. Redux also comes with other third party associated libraries like \redux-persist\\\\ that allows you to store data in localstorage and perform rehydration magic on refresh. In fact redux has lots of use cases which makes it more powerful that context. We can learn more about react-redux from the documentation. To learn more about use cases of redux, do well to also check out this link.

Conclusion

Awesome use cases for context can be found in applying global stuff in our apps like theming, localization, login data, routing and so on. A detailed information about context can be found in the React documentation here. It provides a perfect resource to learn more about context, edge cases not covered here, more use cases and gotchas and more. Thanks for reading and cheers.

 
class SampleComponent extends React.Component { 
  // using the experimental public class field syntax below. We can also attach  
  // the contextType to the current class 
  static contextType = ColorContext; 
  render() { 
    return <Button color={this.color} /> 
  } 
}