- Here are three ways I’ve found to make React presentational components work as re-usable building blocks.
- Here are two stories for a text input component: the first shows the component in its valid state, and the second show the component in its invalid state.
- Instead, extract a new component and pull it up: – – Let the container decide explicitly when and where show presentational components.
- As you keep pulling presentational components up, they start looking like enhanced native elements, so you’d like to be able to pass all props you would pass to a native element, like or .
- Inside the component, extract the props you’ve defined yourself and pass the rest to the element that you’re wrapping: – – Here, we’re separating the prop from the rest, and passing the remaining props to the element.
Saturday, Feb 17 2018
Continue reading “3 Ways to Fine-tune Presentational Components”
- Introducing React Paginating đđđToday, I am happy to announce a React Paginating component.gif react-paginating demoThere are some popular components which help us to solve pagination problem such as react-paginate, react-pager,Â âŚ Now there is another one.
- Itâs called react-paginating with a different approach.How âreact-paginatingâ is uses Function as Child Components pattern which allows a component to publish any variables, states or functions to the outside as input params of a function which is going to be used for handling logic and rendering the UI.Here are some…
- The formula to calculate totalPages:const totalPages = Math.ceil(total / limit);pageCountHow many pages you want to display.I.e:pageCount = 5with pageCount =Â 5pageCount = 9with pageCount =Â 9currentPageThe page currently you are visiting.
- The component calculates and publishes props which allow controlling UI.
- After that, you might put your CustomAnchor / somewhere on your âstorybookâ or components manager.DemoConclusionIf you see it is useful for you.
There are some popular components which help us to solve pagination problem such as react-paginate, react-pager, … Now there is another one. It’s called react-paginating with a different approach…
Continue reading “Introducing React Paginating 🎉🎉🎉 – Dzung Nguyen – Medium”
- A few weeks ago I gave an internal presentation about Storybook for React Native.
- Storybook allows you to create stories with your components which increases development speed, improves reusability and allows you to create prototypes with actual components that can also be used in the real app.
- A small demo showing some of the features that Storybook offers can be seen here: – – You can find the presentation slides here.
Storybook allows you to create stories with your components which increases development speed, improves reusability and allows you to create prototypes with actual components that can also be used in the real app.
Continue reading “React Native Storybook”
- We strongly believe the problems Storybook solves are not unique to any single platform.Of course, weâre also going to be improving the features and performance of Storybook, and create new ways for you to extend Storybook and customise it for your use-case.
- Finally: weâre really seeing the community getting involved with Storybook, we get pull requests making Storybook better in all sorts of ways we didnât expect.
- So who knows what will be included in the next release?Has rebranding from React Storybook changed its culture or direction?The culture certainly changedââânow the community itself is driving Storybook forward.
- If anything, Iâd say our focus on helping the community co-maintain Storybook has had a major impact.Do your company clients adapt React style guides to their workflow?Yes in fact, most of them do.What do you think is the future of web and mobile development?Who knows?
- Iâm super excited about native support for ES modules in the modern browsers and Node.js!What are your favorite components, libraries, or community projects?Babel, Webpack, React, Glamorous, Yarn, Express, ESlint, Prettier, Jest, GraphQL.Iâm also a huge fan of community-driven meetups.Pick one and tell us why: Redux or MobX?It depends.
Today, we’re opening our new series of interviews for React Day Berlin. Since Norbert de Langen is going to speak about building Storybook in Berlin in December, we decided to ask him a couple of…
Continue reading “Norbert de Langen: Storybook has reached outside the React ecosystem & will continue to do so”
- I welcome you to join our Slack and hangout with others who love Storybook.
- We’ve got a lot of things to come.
- Basically, you can do a lot with the new addon API.
- We’ve got a brand new addon API where you can add more features to storybook.
- But there are a lot of things that the community (you guys) is already doing with Storybook.
We released React Storybook in late March, where we introduced a new way to develop the UI component for React. We got a lot of feedback…
Continue reading “Releasing Storybook 2 – KADIRA VOICE”
Read the full article, click here.
@majapw: “@ljharb @nanonymoused @reactjs @AirbnbEng The storybook is live now! :)”