React

Storybook : develop React components in isolation | Part-2

On the Part-1 of this series Storybook : develop React components in isolation | Part-1 , we talked about how we can setup Storybook and start working for our awesome UI-components Library.

Today we will see how we can create our first UI component and add it to Storybook. We will also see how we can see variations for the same component.

I will remove the welcome file src/stories/0-Welcome.stories.js which was created by the tool. Now our app structure looks like below-

Let’s create a new component inside src/components/Spinner.js file.

Continue reading
Standard
React

Storybook : develop React components in isolation | Part-1

Storybook is a tool for developing UI components.

The tool enables developers to create components independently and showcase components interactively in an isolated development environment.

Storybook runs outside of the main app so we can develop UI components in isolation without worrying about app specific dependencies and requirements.

After running, Storybook looks like this ☝️
Here, Button is a component.

Continue reading
Standard
Uncategorized

Awesome VSCode Extension – Peacock(Color yourself)

Mostly I have multiple Projects open on multiple VSCode Editors.

I found a way where I can give different colors to different instances.

I use Peacock to change the color of the Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code’s Remote features, and you want to quickly identify your editor.

I wanted to share this with the Dev community .

It’s created by JohnPapa. There is also one article here on Dev

I am sure, you will like it.

Enjoy!

👋

 

Standard
JavaScript, React

Style React component with styled-components : Part-2

In My Previous post Style React component with styled-components : Part-1 , I wrote how we can start using styled-components and we created one Spinner component with it.

Now we can see, how we can pass props to the styled component named StyledSpinner and change the color/behavior of it.

For this example, I will change the border color by passing prop. So, the styled component will show the color what we pass to it. Continue reading

Standard