如何在 react.js 中创建我们自己的按钮组件，如 antdesign

Question

I want to create my own Components So I had a look on antDesign which is one of the most popular library for React.js.

My question is how can I create my own customised Button component without using any CSS libraries or Frameworks like (Bootstrap, SemanticUI, etc) in react.js like how antDesign team have created it.

Any help would be appreciated with some explanation and an example.

Answer 1

You can make a common component for Button as follow:

import React from 'react';
import styled from 'styled-components';

const PrimaryButton = styled.button`
    color: #fff;
    background-color: #1890ff;
    border-color: #1890ff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
    box-shadow: 0 2px 0 rgba(0,0,0,0.045);
`

const Button = (props) => {
    return (
        <PrimaryButton>
            {props.text}
        </PrimaryButton>
    );
};

export default Button;

Here, You can get props from a parent component and design can be done accordingly. Here in example, I have used styled-components as it provides a usage for css according to props. I have just showed here for primary button.

From a calling components,

<Button type='primary' text='Reset' size={10} disabled={false} icon={'imgUrl'} shape='round' />

You can also pass many more things except shown in example.

Answer 2

If you want to make a component simply make a function and use that function wherever required.

ex:

// buttonComponent.js
export default buttonComponent = () => {
  <button>Hi I am a button</button>
}

thats all you created your component, now can call this component in your code and use it.

But I guess this is not exactly what you want. There are some factor needs to be kept in mind before making a component mostly when making some complex components. you can do that by asking some question to yourself.

lets take an example of button only, there are certain things a button component must do or have.

• What happens when some one click on the button? (sounds dump but probably the most important one)
• Does user can change the text of the button, whats the default text of the button?
• Does the user can call their own function on click of the button?
• What's the default style of the button?
• Does the user can disable the button?
• Does the button can include icons too?
• Does user can change the styles of the button?
• How can the user change the default styles by overriding the styles in css or by passing it in props?
• ....etc

Keeping those in mind for now let's say we are making a small button component with the following two features:

• User can click on button and call their own function and if not provided then nothing will happen.
• User can change the default style of the button by props or by overriding the css.

then the code will be:

// MyButtonComponent.js

export default MyButtonComponent = ({userFunction, userStyle, children}) => {
  <button type="button" onClick={userFunction} style={userStyle} className="my-button-compnonet">
    {children}
  </button>
}

// MyButtonComponent.css
.my-button-component {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
}

that's all our small button component is done.

now to call this component

// mainCompnonet.js

.....
/* callback function on button click */
myFunction = (e) => {
 alert("yeah my button component on click");
}

/* override the default style through the props */
myStyle = {
  borderRadius: 1rem;
}
.....
<MyButtonComponent userFunction={myFunction} userStyle={myStyle}>
 Hi This is my component Button 
</MyButtonComponent>
......

// mainCompnonet.js
.my-button-component {
  color: #000;  /* overrides our component style through css */
}