Code formating

This application uses the React Live library to preview components. So to be able to previewed your component without error, it must respect a certain formatting.

Correct code :


  function Button({ message = 'Click me' }) {
    return <button className="h-24 w-36 rounded-xl bg-fuchsia-800">{message}</button>;
}

Your code must contain a single function, and there must be no other element outside the function.

Incorrect code :


  const handleClick = () => {
    console.log('Button was clicked!');
  };

  function Button({ message = 'Click me', handleClick }) {
  return (
    <button
      className="h-24 w-36 rounded-xl bg-fuchsia-800"
      onClick={handleClick}
    >
      {message}
    </button>
  );
}

To make the code above functional you must put all elements outside the function into the function.

Correct code :


  function Button({ message = 'Click me', handleClick }) {

  const handleClick = () => {
    console.log('Button was clicked!');
  };

  return (
    <button
      className="h-24 w-36 rounded-xl bg-fuchsia-800"
      onClick={handleClick}
    >
      {message}
    </button>
  );
}

For the functional component to be previewed, it must not be an arrow function but a normal function.

Incorrect code :


const ToastButton = () => {
    useEffect(() => {
        // Initialize Materialize components (if necessary)
        window.M.AutoInit();
    }, []);

    const showToast = () => {
        window.M.toast({ html: 'Ceci est un toast!' });
    };

    return (
        <button onClick={showToast} className="btn">
            Afficher le toast
        </button>
    );
};

Correct code :


function ToastButton(){
    useEffect(() => {
        // Initialize Materialize components (if necessary)
        window.M.AutoInit();
    }, []);

    const showToast = () => {
        window.M.toast({ html: 'Ceci est un toast!' });
    };

    return (
        <button onClick={showToast} className="btn">
            Afficher le toast
        </button>
    );
};

RapideUI is currently unable to preview components with dependencies. So if you have components with dependencies, it's normal for RapideUI to give you the error message : " We cannot preview this component ".