Can I change the length of the line between state and state?

It shouldn't be a dependency of the project, it should be up to the user figuring out how to run it. Any thoughts?

Hi @afc163

I'm new with React and am working on a project which uses your Steps component.
I have created a couple of components that act like pages of the Steps component and is using next and prev buttons to navigate between different pages(it's actually more like a Tab component). It all works great except the URL part. I've searched from GitHub and stackoverflow for hours but still, cannot figure out how to get it working with React Router.

Thank you!

Steps.jsx const $dom = ReactDOM.findDOMNode(this);这一行报的错误

React 18, Nextjs 12.3

import Steps from 'rc-steps';

import 'rc-steps/assets/index.css';


const { Step } = Steps;

const Tracking = () => {
  const [current, setCurrent] = useState(0);

  const onChange = (value) => {
    console.log('onChange:', current);
    setCurrent(value);
  };

  return (
    <>
      <Steps current={current} onChange={onChange}>
        <Step title="Step 1" description="This is a description." />
        <Step title="Step 2" description="This is a description." />
        <Step title="Step 3" description="This is a description." />
      </Steps>

      <Steps current={current} onChange={onChange} direction="vertical">
        <Step title="Step 1" description="This is a description." />
        <Step title="Step 2" description="This is a description." />
        <Step title="Step 3" description="This is a description." />
      </Steps>
    </>
  );
}

The single steps are not rendered within the Steps wrapper.

你好，我很想请教一个问题，我单独安装Steps使用，拖动改变窗口大小时候，会报这样的错误：
Uncaught Invariant Violation: Element appears to be neither ReactComponent nor DOMNode
显示错误是在_resize函数里面的 const w = Math.floor(ReactDOM.findDOMNode(this).offsetWidth);
this显示为window对象而不是我们这个Steps对象， 所以findDOMNode不支持非ReactElement就报错了；但是在antd组件里面却没有错误，查看antd的steps组件和最终的export文件也看不出什么端倪，感觉没有做什么循序bind的事情。

Hey guys!
I'm having the following error when rendering

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

This happens only when using

const Steps = require('rc-steps');

Instead of

import Steps from 'rc-steps';

The problem is that, because a limitation at my work, I can't use import. Is there any other workaround to make this module work with require?

Thanks in advance!

when you add a tailContent it just makes the tail-content div to be display: none, nothing happens. ... please help

在组件上的 componentDidMount 打断点会清楚看到这个现象。

这是折行的样子：

测试 Demo ： http://codepen.io/clarkhan/pen/NNmZgx 其实和示例是一样的。

（ps：刚刚没编辑好一不小心回车了，囧……）

Not sure if there was a breaking syntax change between versions 4 and 5 that is causing this, but I upgraded from 4.1.4 to 6.0.1 and it broke rc-steps in my project. The container div shows up but there is no content and css height is 0 px. I downgraded to 5.0.0 to see if that fixed anything and I got the same result. Downgrading again to 4.1.4 renders my steps implementation normally again.

I moved to React 17 and Webpack 5.

The basic code example on your webpage now renders like the attachment.

组件一开始被隐藏导致计算最后一个节点宽度为 0，后续展示后不触发 update，组件始终隐藏。

Hi there, is it possible to use a custom component to display in a step?

If you tab to a clickable step and press Enter, nothing happens. Clicking with a mouse works though. The cause is likely the fact that instead of a button element, a div[role=button] is used. Those do not respond to keyboard interactions by default.

Hi,
I would like to know how to pass 'icons' props in . Actually when the status is finish or else is working fine. BUT when status= error, it has error on console and the icons is not correct ( I would like to use the old style as you have) as the screenshot.
I send icons props as icons="error" is this correct?

Thanks.

When invoking the next button focus gets lost and on pressing tab it goes to the first option

Example - http://react-component.github.io/steps/?path=/story/rc-steps--nextstep.
Need to enable tab index first for keyboard navigation. ^^

两个tab 里面都有 steps 组件 ，然后切换两个tab ，程序会把两个tab的steps的margin-right都修改 导致样式错位 会重新计算另一个tab里面的steps组件的margin-right值
注释Steps.jsx这里的代码 即可解决：
componentDidUpdate() {
// this.calcLastStepOffsetWidth();
}

The URL is referenced in the readme for examples but the site gives a 404. Did the path to the examples change?

删了不太好，怕更新过头，直接install也连不上。

Since this package is CommonJS, we have to use RcSteps.default in our code when importing to an ESM environment, but the types don't recognize this as being possible.

maybe relative: react-component/align#7

在前端监控里面发现始终在报这个错误，搜了下代码发现是下面这段的报错

Sometimes we need to go next/prev by clicking directly on step number from the process bar, It is good if we put onClick callback on click event of steps.

Btw thank you for this effort, It looks so good.

When I converted my .js file into .tsx.

It started giving me this error:
"Property 'Step' does not exist on type 'typeof Steps'."

Please help me figure out this issue.

Previously it was working fine with .js file. But as we're moving to TS and converting files, it is giving me this issue.

Can't click the steps, so it's impossible to go back...

When I'm using Steps with only 1 Step this warning appear please check this condition

https://github.com/react-component/steps/blob/master/src/Step.jsx#L18-L19

warning.js?8a56:44 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.
warning
  @ warning.js?8a56:44getInternalInstanceReadyForUpdate
  @ ReactUpdateQueue.js?fd2c:45ReactUpdateQueue.enqueueSetState
  @ ReactUpdateQueue.js?fd2c:192ReactComponent.setState
  @ ReactComponent.js?702a:67(anonymous function)
  @ Steps.js?da93:51

React: 15.0.2; react-router: 2.4.0; webpack: 1.12.14.

I can't give too many specific details as this is not a personal project.

I can reproduce this by routing away from the page which embeds the step component, or by forcing a hot reload with webpack. My belief, as I've seen this sort of warning a few times, is that:

• a componentDidUpdate call occurs right before unmount (don't know if this is a canonical React lifecycle order or simple occurence or an effect of the packages)
• the call to setState is async and occurs after the unmount, generating the no-op warning.

As far as I've read the code, you could solve it by guarding the call with a 'mounted' flag (which is set in the other lifecycle methods: willmount/willunmount) or simply setting state synchronously in componentDidUpdate (in fact, as far as I've seen, the state change will only be changed after the lifecycle method anyway). Cheers for the component.

item 宽度的计算都在 didMount 中完成，如果改变了 step 的数量，step 还是维持在 mount 时的宽度，这会引起一些问题，比如原本是3个，后来变成5个的时候，因为宽度超长，样式就变形了

The default icon back color is blue #2db7f5 .
And the current props are :

Step.propTypes = {
  className: _react.PropTypes.string,
  prefixCls: _react.PropTypes.string,
  style: _react.PropTypes.object,
  wrapperStyle: _react.PropTypes.object,
  tailWidth: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
  status: _react.PropTypes.string,
  iconPrefix: _react.PropTypes.string,
  icon: _react.PropTypes.node,
  adjustMarginRight: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
  stepLast: _react.PropTypes.bool,
  stepNumber: _react.PropTypes.string,
  description: _react.PropTypes.any,
  title: _react.PropTypes.any
};

No props seems related to icon color . Is it required enhancement or already exist ? Where is if it iswas existed .

本地 install & start 之后跑不起来

Demo site don't work. http://react-component.github.io/steps/)

It seems the assets are missing from the package.

"rc-steps": "^3.0.0",

The onChange event fires when you press Enter even if the step is disabled

How can I have some text showing up on the circle instead of having the check mark after step success?

We are using radio buttons as the step content and we got accessibility bugs since the label is not associated with the radio button.

When we add more steps, the steps are getting crunched. Is there a way to avoid it. May be get them in a new line or show a horizontal scroll bar as such? Can you please guide..?

There is no styling included currently. In the README, was it suppose to mention adding the .less files?

• No more delay render
• No more white background under step item: ant-design/ant-design#7325

do not support rtl layouts.

Having the following errors on console:

Uncaught Error: Cannot find module "prop-types"

Can I show also text in the circle of the previous steps?
It is not showing the text(1,2) of previous steps.